Question

我正在做一个简单的测试网站来练习HTML。这些是我尝试过的图片对齐变体：

 <style type="text/css">
      img {
      image-align: center;
      border: 2px dashed gray;
      height: 200px;
      width:  140px;

      }
 </style>

 <img src="images/htmlphoto2.jpg" alt="profile pic of man wearing tie" align="middle"/>

 <style type="text\css">
     img {
       margin-right: auto;
       margin-left: auto;
     }

  <style type="text\css"> 
     img {
       display: block;
       margin: 0 auto;
     }
  </style>

完整代码：我使用内部样式表和内联样式的组合进行练习。

 <!-- autobiobrevio -->
 <!-- 8/21/14 11:00 - 11:50 Structure completed -->
 <!--8/23/14 10:00 pm - Alignment -->

 <!DOCTYPE html>

 <html>
 <head>
 <meta charset="utf-8" />
 <title>biosite</title>
    <style type="text/css">
        h1  {
          text-align: center;
        }

       img {
          image-align: center;
          border: 2px dashed gray;
          height: 200px;
          width:  140px;
       }

    </style>

 </head>

 <body>

 <h1> Steve's Autobiobrevio </h1>

<img src="images/htmlphoto2.jpg" alt="profile pic of guy wearing tie" />
<br>
<br>

  <table>
   <tr>
     <td>
       <ul> <span style="font-family: Impact"> De moi </span>
        <li> Born October 1972 </li>
        <li> CT </li>
        <li> blah blah blah </li>
       </ul>
    </td>

     <td>
       <ul> <span style="font-family: Impact"> Hobbies </span>  
        <li> Guitar </li>
        <li> HTML </li>
        <li> Hiking </li>
       </ul>
     </td>

    <td>
      <ul>  <span style="font-family: Impact"> Fav Guitarists </span>
       <li> David Gilmour </li>
       <li> Muddy Waters </li>
       <li> Dave Navarro </li>
      </ul>
    </td>
 </table>

  <div style="width: 800px; height: 100px; background-color: red" </div>


 </body>
 </html>

谢谢。

Answer 1

尝试将display:block添加到您的

html：

<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie" align="middle"/>

css：

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

JSFIDDLE DMEO

Answer 2

你能提供完整的HTML代码吗？无论如何首先删除align =“middle”并尝试这个，即使它与你的相似

img{
  display:block;
  margin:auto;

     }

Answer 3

我使用内联样式标记解决了我的问题：

但为什么内联样式表不起作用？

Answer 4

试试这个，它肯定会有用......

图片代码：

<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie"/>

这是css：

<style type=text/css>
img.displayed {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>

跳它也适合你..

Answer 5

您也可以尝试：

<style type="text/css">
    img {
    position:absolute;
    border:2px dashed gray;
    height:200px;
    width:140px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    }
 </style>

如何将图像对齐到中心？

5 个答案: