居中图像和文本

Question

我希望图像和文本水平和垂直居中。最好的方法是什么？我试过浮动但它似乎没有用。理想结果见上图

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 属性在这种情况下不起作用。这有点违反直觉，但垂直对齐仅在 table 布局中有效。

你有几种方法可以解决你的困境，但在 table 的话题上，使用 table 来帮助你对齐可能不是一个坏主意。例如，您可以创建一个包含一行 <tr> 和四个 table 单元格 <td> 的 table，并将垂直对齐应用于 table 单元格。图像将位于第二个单元格中，段落将位于第三个单元格中。然后，您可以将所需的 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;
    }

你也可以用段落来包裹图片并控制它。您可以使用与其下方文本相同的段落格式，或为其赋予自己的 class。只要确保它也有 text-align: center programmed in it.

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

居中图像和文本

Centering Images and Text

html

css

centering