HTML/CSS 埋め込み - どのようにして簡単に水平方向に中央に配置しますか <div> CSSを使用していますか? </div>

HTML/CSS入門 / css / html

<div> ブロック要素をページの水平方向の中央に配置し、最小幅に設定しようとしています。これを行う最も簡単な方法は何ですか? <div> 要素をページの残りの部分とインラインにしたい。例を描いてみましょう:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

cmcginty



Answer #1
p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/ *オブジェクトのスタイルを設定します* /

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>