Question

我正在尝试使用<div>标记来居中包含文字和图片的<center>元素，但出于某种原因，它仅适用于文字而非图像。

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>

但如果你试试看，你会发现只有文字“名字”和“姓氏”居中但不是图片。（我知道你将无法看到图片default.jpg，但它会显示图片的位置。）

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

如果是的话，如何解决？

Answer 1

<img style="float:left;"

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

删除它，并在img标记

之后添加换行符<br>

http://jsfiddle.net/jn8zgszy/

Answer 2

从float:left代码

中删除img内嵌样式

变化：

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

要：

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

<强> JSFiddle Demo

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

Answer 4

如果您希望图片及其中的文字位于中心位置，那么您可以简单地将text-align:center;提供给.profile

.profile{
  text-align:center;
}

<center>标签只会居中文字而不是图片</center>

4 个答案: