居中图像和文本
这个问题在这里已经有了答案：
解决方案1
演示：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;
}
解决方案2使用flexbox
演示：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;
}
vertical-align属性在该上下文中不起作用。 这有点违反直觉，但垂直对齐只能在桌面布局中有效地工作。
你有几种方法来解决你的困境，但在桌子的话题上，使用桌子来协助你的定位可能不是一个坏主意。 例如，您可以创建一个包含一行<tr>和四个表格单元<td>表格，并将垂直对齐应用于表格单元格。 图像将在单元格2中，而单元格3中的段落将在单元格2中。 然后，您可以将所需的width应用于单元格以确保正确的水平对齐。
PS：没有<p1>标签。 你应该只使用<p> 。
要将文本居中，您应该使用text-align：center。
p1{
font-family: AvenirNext-Regular;
font-size: 24px;
color: #FFFFFF;
line-height: 50px;
display: inline-block;
text-align: center;
}
您也可以使用段落来包装图像并对其进行控制。 您可以使用与其下面的文本相同的段落格式，或者给它自己的类别。 只要确保它也有文本对齐：在其中编程的中心。
<p1><img class="imac" src="imac.png" /></p1>