Html 图像和文本居中

我希望图像和文本水平和垂直居中。最好的办法是什么？我试过浮动，但似乎不起作用。如需理想结果，请参见上图

HTML:

---

垂直对齐

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

您有几种方法可以解决您的困境，但是在表的主题上，使用表来帮助对齐可能不是一个坏主意。例如，您可以创建一个包含一行

和四个表格单元格

的表格，并将垂直对齐应用于表格单元格。图像在第二单元，段落在第三单元。然后将所需的

宽度
应用于单元格，以确保正确的水平对齐

注：没有
标签。您应该只使用解决方案1

演示：

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>

解决方案2使用flexbox

演示：

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

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

要使文本居中，应使用“文本对齐：居中”

    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> 


不能将宽度为100%的物体居中放置。你要么把它缩小，要么给它留边距。我希望背景能贯穿整个页面，没有100%的宽度我怎么能做到@朱哈纳现在怎么样？屏幕截图。要清楚，您的第一个解决方案不是使用表格，而是使用CSS像表格一样显示。不一样的HTML你是对的，我不好。谢谢，我用了第二种方法！
    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>