2

この画像を div 内の中央に配置しようとしましたが、左側に配置され続けます。

HTML

<div id="main">
   <div id="left">This is a test</div>
   <div id="right">
      <h2 id="fish">Fishtail</h2>
      <img height="150px" width="250px" src="image.jpg">
   </div>
</div>

CSS

#left, #right {
   width: 40%; 
   margin:5px; 
   padding: 1em;
   color:#51CBED;
   font-size:20px;
   padding:15px;
   background-color:white;
}
#left {
    float:left;
}
#right {
    float:right;
}
#fish  {
    text-align:center;
}
#main {
     height:800px;
     width:950px;
     background-color:black;
     opacity:.75;
     filter:alpha(opacity=75);
     margin-top:10px;
     margin-bottom:75px;
     padding:20px;
}

を使用してみmargin: auto;ましalign:middle;たが、どちらも機能していないようです。

4

5 に答える 5

4

相対/絶対位置の必要はありません。

これを解決する簡単な方法は、画像を設定することdisplay:blockです。

jsFiddle デモ- 完全に動作します。

CSS

#main #right img {
    margin: 0px auto;
    display: block;
}
于 2013-09-28T17:26:34.110 に答える
0

追加してみてください：

#right img {
    margin:auto;  
    display:block;
}

JSフィドル

于 2013-09-28T17:34:26.313 に答える
0

これを試して：

HTML:

<div id="main">
        <div id="left">This is a test</div>
        <div id="right">
        <h2 id="fish">Fishtail</h2>
        <img height="150px" width="250px" src="image.jpg">
        </div>
</div>

CSS:

#left, #right {
   width: 40%; 
   margin:5px; 
   padding: 1em;
   color:#51CBED;
   font-size:20px;
   padding:15px;
   background-color:white;
}
#left {
    float:left;
}
#right {
    float:right;
    text-align:center;
}
#fish  {
    text-align:center;
}
#main {
     height:800px;
     width:950px;
     background-color:black;
     opacity:.75;
     filter:alpha(opacity=75);
     margin-top:10px;
     margin-bottom:75px;
     padding:20px;
}

Jsfiddle: http://jsfiddle.net/hdMEQ/

私は基本的に text-align: center; を追加しました。#right id のプロパティ。

于 2013-09-28T17:29:08.880 に答える
0

可変幅と高さで死点を取得するか、幅と高さを知る必要はありません。

画像の中心にしたいdivに対する絶対位置を設定します

#main #right img {
    position:absolute;
    display: block;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
} 
#right {
    position:relative;
}
于 2013-09-28T17:31:36.083 に答える
0 

<style type="text/css">
  .centerDiv {
    margin-right: auto;
    margin-left: auto;
    width: 80px;
  }
</style>


<div id="main">
     <div id="left">This is a test</div>
      <div id="right" class="centerDiv">
        <div class="centerDiv">
            <h2 id="fish">Fishtail</h2>
            <img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
        </div>

      </div>
   </div>

</body>
</html>
于 2013-09-29T00:05:49.580 に答える