Centering Images and Text [duplicate] - html

Question

This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 7 years ago.
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;
}

Answer 1

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

Answer 2

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

Answer 3

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>