☰

「position: absolute」要素を中央に配置する方法 質問する

tag-icon • tag-icon html css css-position centering
「position: absolute」要素を中央に配置する方法 質問する

属性がpositionに設定されている要素を中央に配置する際に問題が発生しますabsolute。画像が中央に配置されない理由をご存知の方はいらっしゃいますか?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
      <li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

ベストアンサー1

幅を設定している場合は、以下を使用できます。

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

おすすめ記事