<center> 标签只会使文本居中而不是图像答案

【问题标题】：<center> tags will only center text but not image<center> 标签只会使文本居中而不是图像
【发布时间】：2014-08-10 23:34:24
【问题描述】：

我正在尝试使用<center> 标签将包含文本和图像的<div> 元素居中，但由于某种原因，它仅适用于文本而不是图像。

HTML：

<body>
        <h1 align="center">Search For a Member</h1>
        <br>
        <br>
        <form action="SearchController" method="get">
            Enter the member's first name: <input type="text" style="width: 18em;" name="searchBox">
            <input style="width:6em;" type="submit" value="Search">
            <input style="width:6em;padding-left:7px;" type="submit" value="Back">
        </form>

        <center>
        <div class="profile">
            <img style="float:left;" src="default.jpg"height=100 width=100>
            First Name
            <br>
            Last Name
            <br>
        </div>
        </center>
</body>

CSS：

    <style>
    body {
        background-color: #BCD2EE;
        margin-left: 20%;
        margin-right: 20%;
        border: 1px outset #4876FF;
        border-width: 5px;
        padding: 10px 10px 30px 10px;
    }
    .profile {
        overflow: hidden;
        padding-top: 30px;
    }
    </style>

但是，如果您尝试一下，您会发现只有文本“First Name”和“Last Name”会居中，但图片不会居中。（我知道你看不到图片default.jpg，但它会告诉你图片的位置）。

为什么图片不会居中？是因为float:left; 属性，它从<center> 标签中排除了图片？

如果是这样，如何解决？

【问题讨论】：

考虑不使用<center>as it is deprecated。有很多alternative methods to center content

标签： html css

【解决方案1】：

<img style="float:left;"

你不应该有style="float:left;"

删除它，并在 img 标签后添加一个换行符<br>

http://jsfiddle.net/jn8zgszy/

【讨论】：

但我希望文本“First Name”和“Last Name”位于图片的右侧，而不是下方。
嗯，其实现在我看到了，文字在图片下面的时候会好很多……我想我还是会用它的……
@so.very.tired 啊！好吧，我很高兴你喜欢它哈哈！如果您希望文本位于右侧，则需要使用的样式不是 float:left，而是 display:inline-block
另外，您可以使用表格将文本垂直对齐到右侧。如果您将整个图像放在带有 display:inline-block 的中，那么您的原始想法应该可行。

【解决方案2】：

从 img 标签中移除 float:left 内联样式

变化：

<img style="float:left;" src="default.jpg"height=100 width=100>

收件人：

<img src="default.jpg" height="100" width="100"><br />

JSFiddle Demo

【讨论】：

【解决方案3】：

没有deprecated <center> 标记、外部CSS 和调整的表单元素的替代想法。

通过.wrap { display: table; margin: 0 auto; }完成居中

Have a jsBin example!

HTML

<div class="wrap">
  <form action="SearchController" method="get">
        <legend>Search For a Member</legend>

        <label for="firstName">Enter the member's first name:</label>
        <input name="searchBox" id="firstName" type="text"> 

        <button type="submit">Search</button>       
        <button type="submit">Back</button>
  </form>

  <div class="profile">
    <img src="http://www.placehold.it/100" />
    <dl>
      <dt>First Name</dt>
      <dd>Greg</dd>

      <dt>Last Name</dt>
      <dd>Norman</dd>
    </dl>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.wrap {
    display: table;
    margin: 0 auto; 
}
form {
    padding: 10px;
}
legend {
    margin: 20px auto;
    font-weight: bold;
    font-size: 1.4em;
    display: table;
}
.profile img {
    margin: 10px 0 10px;
}
.profile dt {
    font-weight: bold;
}
.profile dd {
    padding: 10px 0;
}

【讨论】：

【解决方案4】：

如果您希望图像和这些文本居中且一个位于另一个下方，那么您可以简单地将 text-align:center; 发送给您的 .profile

.profile{
  text-align:center;
}

【讨论】：