Centering Images and Text

This question already has an answer here:

Vertically align text next to an image? 20 answers

---

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;
}

---

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> .

---

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> 

链接地址: http://www.djcxy.com/p/41546.html

上一篇: 不能对齐文本和图像？

下一篇: 居中图像和文本