Centering Images and Text

Question

Image of what I want it to look like

I want both the image and text centered horizontally and vertically. What is the best way to go about this? I have tried float but it doesn't seem to be working. See the above image for ideal result

HTML:

<div class="clearfix" id="one"> 
    <img class="imac" src="imac.png"> 
    <p1> 
        I want to work in Computer Design, changing the way people 
        interact with thoughtfully considered software and hardware 
        experiences. 
    </p1>
</div>

CSS:

 #one{
  background-color: #4E5B71;
  width: 100%;
  height: auto;
  padding: 15px;
}
.clearfix{
  overflow: auto;
}
p1{
  font-family: AvenirNext-Regular;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 50px;
  vertical-align: middle;
  display: inline-block;
}
imac{
  width: 100% auto;
  height: auto;
  float:left;
  vertical-align: middle;
}

You can't center something that has 100% width. Either you'll have to make it narrower or give it margins. — JJJ, Nov 14 '15 at 19:51
I want the background to be to go across the entire page how can I do that without 100% width? @Juhana — Tanner Larson, Nov 14 '15 at 19:53

score 0 · Answer 1 · answered Nov 14 '15 at 19:56

The vertical-align property does not work in that context. It is a bit counter-intuitive but vertical-align will only effectively work in a table layout.

You have a few ways to solve your predicament, but on the topic of tables, it might not be a bad idea to use a table to assist with your alignment. For example, you could put create a table with one row <tr> and four table cells <td> and apply your vertical-align to the table cells. The image would be in cell two, and the paragraph in cell three. You would then apply the desired width to the cells to ensure correct horizontal alignment.

PS: There is no <p1> tag. You should be using just <p>.

Nenad Vracar · Accepted Answer · 2015-11-14T21:52:55.363

SOLUTION 1

Demo: https://jsfiddle.net/2Lzo9vfc/78/

HTML

<div class="clearfix" id="one"> <img class="imac" src="http://placehold.it/70x50"> <p> I want to work in Computer Design, changing the way people interact with thoughtfully considered software and hardware experiences. </p>
</div>

CSS

 #one{
  background-color: #4E5B71;
  width: 100%;
  height: auto;
  padding: 15px;
  display: table;
}

.clearfix{
  overflow: auto;
}

p{
  font-family: AvenirNext-Regular;
  font-size: 16px;
  color: #FFFFFF;
  vertical-align: middle;
  display: table-cell;
}

.imac {
  vertical-align: middle;
  display: table-cell;
}

SOLUTION 2 using flexbox

Demo: https://jsfiddle.net/2Lzo9vfc/81/

CSS

    #one{
    background-color: #4E5B71;
    width: 100%;
    height: auto;
    padding: 15px;
    display: -webkit-flex;
    display: flex;
    align-items:center;
}

.clearfix{
    overflow: auto;
}

p{
    font-family: AvenirNext-Regular;
    font-size: 16px;
    color: #FFFFFF;
}

To be clear, your first solution is not using tables but using CSS to display _like_ a table. Not the same as a HTML — Rob, Nov 14 '15 at 21:51

score 0 · Answer 3 · answered Nov 14 '15 at 20:01

To center the text, you should use text-align: center.

    p1{
        font-family: AvenirNext-Regular;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 50px;
        display: inline-block;
        text-align: center;
    }

You can also use a paragraph to wrap the image and control it. You can use the same paragraph formatting as the text below it or give it its own class. Just make sure it also has text-align: center programmed in it.

    <p1><img class="imac" src="imac.png" /></p1>

Centering Images and Text

3 Answers3