web-dev-qa-db-ja.com

ブロック要素内のテキストを垂直に整列

私は常に垂直方向の配置が求められることを知っていますが、この特定の例の解決策を見つけることができないようです。要素自体ではなく、要素内でテキストを中央に配置したい：

HTML：

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS：

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}
<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

これには本当にCSS3プロパティはありませんか？ <span>を追加しても構いませんが、それ以上のマークアップを追加したくありません。

ありがとう！

htmlcsshtml5css3
43
user623520

CSSフレキシブルボックスレイアウトモジュール に従って、a要素をflex container（図を参照）align-itemsを使用してverticallyテキストをcross axis（ 主軸）に垂直です。

enter image description here

あなたがする必要があるのはそれだけです

display: flex;
align-items: center;

ブラウザサポートの考慮事項

クローム

display: -webkit-flex;
-webkit-align-items: center;

Firefox

layout.css.flexbox.enabledをtrueに設定します。

あるいは、あなたはまだ使用することができます

display: -moz-box;
-moz-box-align: center;

これはcss3-flexboxではなく、折り返されないことを知ってください。

[〜＃〜] ie [〜＃〜]

誰かがIE構文をチェックしてここに追加できますか？ Advanced cross-browser flexbox から構文を試すことができます。

こちらをご覧ください fiddle （FFを使用している場合は、layout.css.flexbox.enabledをtrueに設定することを忘れないでください。）

78
melhosseiny

また試すことができます

a {
  height:100px;
  line-height:100px;
}
50
ericbae
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

12
Vlad

Display：inline-blockと：afterを試すことができます。

HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

デモ をご覧ください。

4
Airen

パディングを使用しても問題ありませんか？： http://jsfiddle.net/sm8jy/ ：

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}
2
AJJ

アイテムを垂直方向および水平方向に中央揃えする場合は、inline-tableとともにtable-cellを使用することもできます。これらの表示プロパティを使用してメニューを作成する例を以下に示します。

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

display: inline-table;をすべての<li>に設定し、display: table-cell;とvertical-align: middle;を子<a>に適用することで機能します。これにより、<table>タグを使用せずに使用できます。

このソリューションは、要素の高さがわからない場合に役立ちます。

Internet Explorer 8以上では、互換性が非常に良好です（ caniuse.com と比較）。

1
Anwar

以下に、CSSのみを使用した一般的なソリューションと、2つのバリエーションを示します。最初の行は現在の行の垂直方向の中心にあり、2番目の行はブロック要素内の中心にあります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

私が理解しているように、vertical-alignはインラインブロック要素、例えば<img>にのみ適用されます。要素が機能するには、要素の表示属性をインラインブロックに変更する必要があります。この例では、行の高さがスパンに合わせて拡大します。 <div>などの収容要素を使用する場合は、line-height属性を高さと同じに設定します。警告、含まれる<span>でline-height：normalを指定する必要があります。そうでない場合、含まれる要素から継承されます。

1
Steve11235

vladのおかげで answer インスピレーションをくれました。 IE11、FF49、Opera40、Chrome53でテストおよび動作

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

テキストの折り返し、改行、画像などでも、すべての方向にうまく中央に配置されます。

私は空想を得て、スニペットを作りました

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long Word*/
  Word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}
<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences
0
RozzA