Question

Image of what I want it to look like

我希望图像和文本水平和垂直居中。最好的方法是什么？我试过漂浮，但它似乎没有起作用。请参阅上图以获得理想结果

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

vertical-align属性在该上下文中不起作用。这有点违反直觉，但垂直对齐只能在表格布局中有效地工作。

您有几种方法可以解决您的困境，但就表格而言，使用表格协助您的对齐可能并不是一个坏主意。例如，您可以创建一个包含一行<tr>和四个表格单元格<td>的表格，并将垂直对齐应用于表格单元格。图像将位于单元格2中，而段落位于单元格3中。然后，您可以将所需的width应用于单元格，以确保正确的水平对齐。

PS：没有<p1>标记。您应该只使用<p>。

Answer 2

解决方案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;
}

Answer 3

要使文本居中，您应该使用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>

居中图像和文字

3 个答案: