tags will only center text but not image

Question

I'm trying to center a <div> element containing both text and image using <center> tags, but for some reason it only applies on the text and not the image.

HTML:

<body>
        <h1 align="center">Search For a Member</h1>
        <br>
        <br>
        <form action="SearchController" method="get">
            Enter the member's first name: <input type="text" style="width: 18em;" name="searchBox">
            <input style="width:6em;" type="submit" value="Search">
            <input style="width:6em;padding-left:7px;" type="submit" value="Back">
        </form>

        <center>
        <div class="profile">
            <img style="float:left;" src="default.jpg"height=100 width=100>
            First Name
            <br>
            Last Name
            <br>
        </div>
        </center>
</body>

CSS:

    <style>
    body {
        background-color: #BCD2EE;
        margin-left: 20%;
        margin-right: 20%;
        border: 1px outset #4876FF;
        border-width: 5px;
        padding: 10px 10px 30px 10px;
    }
    .profile {
        overflow: hidden;
        padding-top: 30px;
    }
    </style>

But if you'll try it, you'll see that only the text "First Name" and "Last Name" gets centered but not the picture. (I know you won't be able to see the picture default.jpg, but it will show you where the image would be).

Why won't the picture get centered? is it because of the float:left; property, which excludes the picture from the <center> tag?

If so, how can it be fixed?

Consider not using `` [as it is deprecated](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html). There are many [alternative methods to center content](http://stackoverflow.com/questions/14286597/css-alternative-to-center) — misterManSam, Aug 10 '14 at 14:20

Albert Renshaw · Accepted Answer · 2014-08-10T15:11:07.227

2

<img style="float:left;"

You shouldn't have style="float:left;"

Remove that, and also add a line break <br> after the img tag

http://jsfiddle.net/jn8zgszy/

edited Aug 10 '14 at 15:11

answered Aug 10 '14 at 14:16

Albert Renshaw

15,644
17
92
173

But I want the text "First Name" and "Last Name" to sit to the right of the picture, not below it. – so.very.tired Aug 10 '14 at 14:26
Well, actually now that I see it, it's much nicer when the text is below the picture... I think I'll use it after all... – so.very.tired Aug 10 '14 at 14:28
@so.very.tired Ah! Well I'm glad you like it haha! If you want the text to sit to the right the style you need to use isn't float:left, it's display:inline-block – Albert Renshaw Aug 10 '14 at 14:37
Also, you can use a table to vertical align the text to the right. If you put the whole image inside a with display:inline-block your original idea should work. – Albert Renshaw Aug 10 '14 at 14:38

score 0 · Answer 2 · answered Aug 10 '14 at 14:18

0

Remove float:left inline styling from img tag

Change:

<img style="float:left;" src="default.jpg"height=100 width=100>

To:

<img src="default.jpg" height="100" width="100"><br />

JSFiddle Demo

answered Aug 10 '14 at 14:18

imbondbaby

6,063
3
17
51

score 0 · Answer 3 · edited May 23 '17 at 12:29

An alternative idea without the deprecated <center> tag, external CSS and tweaked form elements.

Centering is done via .wrap { display: table; margin: 0 auto; }

Have a jsBin example!

HTML

<div class="wrap">
  <form action="SearchController" method="get">
        <legend>Search For a Member</legend>

        <label for="firstName">Enter the member's first name:</label>
        <input name="searchBox" id="firstName" type="text"> 

        <button type="submit">Search</button>       
        <button type="submit">Back</button>
  </form>

  <div class="profile">
    <img src="http://www.placehold.it/100" />
    <dl>
      <dt>First Name</dt>
      <dd>Greg</dd>

      <dt>Last Name</dt>
      <dd>Norman</dd>
    </dl>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.wrap {
    display: table;
    margin: 0 auto; 
}
form {
    padding: 10px;
}
legend {
    margin: 20px auto;
    font-weight: bold;
    font-size: 1.4em;
    display: table;
}
.profile img {
    margin: 10px 0 10px;
}
.profile dt {
    font-weight: bold;
}
.profile dd {
    padding: 10px 0;
}

score 0 · Answer 4 · answered Aug 10 '14 at 15:34

0

If you wanted the Image and those text to be center and one below the other then you could simple give text-align:center; to your .profile

.profile{
  text-align:center;
}

answered Aug 10 '14 at 15:34

undefinedtoken

781
1
6
24

tags will only center text but not image

4 Answers4