html - div 内のテキストを垂直方向に揃えるにはどうすればよいですか?

Question

テキストを div に揃える最も効果的な方法を見つけようとしています。私はいくつかのことを試しましたが、どれもうまくいかないようです。

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

最新のブラウザでこれを行う正しい方法は、Flexboxを使用することです。

詳細については、この回答を参照してください。

古いブラウザで機能するいくつかの古い方法については、以下を参照してください。

---

CSSでの垂直方向のセンタリング
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

記事の概要：

CSS 2ブラウザーの場合、display:table/を使用display:table-cellしてコンテンツを中央に配置できます。

サンプルはJSFiddleでも入手できます。

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

#古いブラウザ（Internet Explorer 6/7）のハックを、新しいブラウザからスタイルを非表示にするために使用するスタイルにマージすることができます。

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Answer 2

属性を追加する必要がありline-height、その属性は の高さと一致する必要がありますdiv。あなたの場合：

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

height実際、属性を完全に削除することもできます。

ただし、これは1 行のテキストに対してのみ機能するため、注意が必要です。

Answer 3

ここに素晴らしいリソースがあります

http://howtocenterincss.com/から:

CSS のセンタリングは面倒です。さまざまな要因に応じて、無数の方法があるようです。これにより、それらが統合され、各状況に必要なコードが提供されます。

フレックスボックスの使用

この投稿を最新の技術で最新の状態に保つことに合わせて、Flexbox を使用して何かを中央に配置するはるかに簡単な方法を次に示します。Flexbox はInternet Explorer 9以前ではサポートされていません。

ここにいくつかの優れたリソースがあります:

• フレックスボックスのガイド
• Flexbox を使用した要素のセンタリング
• Flexbox の Internet Explorer 10 構文
• フレックスボックスのサポート

ブラウザ接頭辞付きの JSFiddle

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

別の解決策

これはzerosixthreeからのもので、6 行の CSS で何でも中央揃えにすることができます

この方法は、 Internet Explorer 8 以前ではサポートされていません。

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

前の回答

マークされた回答のリンクが少し古くなっているため、シンプルでクロスブラウザーのアプローチが便利です。

JavaScript や CSS の行の高さに頼らずに、順序なしリストと div の両方でテキストを垂直方向と水平方向の中央に配置する方法。テキストの量に関係なく、特定のリストまたは div に特別なクラスを適用する必要はありません (コードはそれぞれ同じです)。これは、Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera、Safari など、すべての主要なブラウザーで動作します。最新のブラウザーにはない CSS の制限があるため、2 つの特別なスタイルシート (Internet Explorer 7 用と Internet Explorer 6 用) が用意されています。

Andy Howard - 順序付けされていないリストまたは div でテキストを垂直方向および水平方向に中央揃えにする方法

私が最後に取り組んだプロジェクトでは、Internet Explorer 7/6 はあまり気にしていなかったので、少し簡素化したバージョンを使用しました (つまり、Internet Explorer 7 および 6 で動作させるものを削除しました)。それは他の誰かにとって役立つかもしれません...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 4

これを試して、親divに追加してください：

display: flex;
align-items: center;

Answer 5

これを行うには、ディスプレイを「table-cell」に設定し、次を適用しvertical-align: middle;ます。

    {
        display: table-cell;
        vertical-align: middle;
    }

ただし、許可なくhttp://www.w3schools.com/cssref/pr_class_display.aspからコピーしたこの抜粋によると、これは Internet Explorer のすべてのバージョンでサポートされているわけではありません。

注:値「inline-table」、「table」、「table-caption」、「table-cell」、「table-column」、「table-column-group」、「table-row」、「table-row」 -group" および "inherit" は、Internet Explorer 7 以前ではサポートされていません。Internet Explorer 8 には !DOCTYPE が必要です。Internet Explorer 9 はこれらの値をサポートしています。

次の表は、http://www.w3schools.com/cssref/pr_class_display.aspからも許可されている表示値を示しています。

Answer 6

最近では (Internet Explorer 6-7-8 はもう必要ありません) display: table、この問題 (またはdisplay: flex) には CSS を使用するだけです。

---

古いブラウザの場合:

テーブル：

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

フレックス：

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

---

これは（実際には）この問題に対する私のお気に入りの解決策です（シンプルで非常によくブラウザがサポートされています）：

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Answer 7

Flexboxは私にとって完璧に機能し、親 div 内の複数の要素を水平方向と垂直方向に中央に配置しました。

以下のコードは、parent-div 内のすべての要素を列にスタックし、要素を水平方向と垂直方向の中央に配置します。child-div を使用して、2 つのアンカー要素を同じ行 (行) に保持しました。child-div がないと、3 つの要素 (Anchor、Anchor、Paragraph) がすべて、parent-div の列内で互いに重なり合ってスタックされます。ここでは、子 div のみが親 div 列内に積み重ねられています。

.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: pink;
}

<div class="parent-div">
  <div class="child-div">
    <a class="footer-link" href="https://www.github.com/">GitHub</a>
    <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
    <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
  </div>
</div>

Answer 8

この簡単な解決策を確認してください：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Answer 9

これは私が見つけた最もクリーンなソリューション (Internet Explorer 9 以降) であり、transform-style他の回答が省略していたことを使用して、「0.5 ピクセルでオフ」の問題を修正します。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

出典:わずか 3 行の CSS でなんでも垂直方向に整列

Answer 10

table/table-cell に頼らずにコンテンツを垂直方向に配置する簡単な方法があります。

http://jsfiddle.net/bBW5w/1/

その中に、コンテナーの高さ全体を想定する非表示の (幅 = 0) div を追加しました。

Internet Explorer と Firefox (最新版) で動作するようです。他のブラウザでは確認していません

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

そしてもちろん、CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Answer 11

使用する：

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

このトリックを使用すると、中央揃えにしたくない場合は、「left:0」を追加して左揃えにすることができます。

Answer 12

うーん、明らかにこれを解決する方法はたくさんあります。

しかし、<div>絶対に配置されたheight:100%(実際にはtop:0;bottom:0固定幅) があり、display:table-cellテキストを垂直方向に中央揃えすることができませんでした。私の解決策には内部スパン要素が必要でしたが、他の多くの解決策もそうしているように見えるので、追加することもできます。

私のコンテナは a.labelで、数字を縦方向に中央揃えにしたいです。絶対に配置しtop:50%て設定することでそれを行いましたline-height:0

<div class="label"><span>1.</span></div>

また、CSS は次のとおりです。

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

実際に見てみましょう: http://jsfiddle.net/jcward/7gMLx/

Answer 13

テーブル要素を埋め込んでみてください。

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Answer 14

プロパティで使用する必要がある場合min-heightは、この CSS を次の場所に追加する必要があります。

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Answer 15

CSS:

.vertical {
   display: table-caption;
}

このクラスを、縦に揃えたいものを含む要素に追加します