494

タブのコンテンツを垂直方向に中央display:inline-flex揃えにしようとしていますが、CSS スタイルを追加すると、水平方向のテキスト配置が消えます。

タブごとに x と y の両方のテキスト配置を行うにはどうすればよいですか?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

4

26 に答える 26

791 

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}
<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

  • アプローチ 3 - table-cell/ vertical-align: middle:

    例はこちら/フルスクリーンの例

    場合によっては、html/body要素の高さが に設定されていることを確認する必要があります100%。

    縦方向に配置するには、親要素のwidth/heightをに設定し100%、 を追加しdisplay: tableます。次に、子要素について、 を に変更しdisplayてtable-cellを追加しvertical-align: middleます。

    text-align: center水平方向の中央揃えの場合、テキストとその他のinline子要素を中央に追加できます。または、要素がレベルmargin: 0 autoであると仮定して、 を使用することもできます。block

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

  • アプローチ 4 -50%変位を伴う上からの絶対配置:

    例はこちら/フルスクリーンの例

    このアプローチでは、テキストの高さが既知であると想定しています。この例では、18px. 50%親要素に対して、要素を上から絶対に配置するだけです。margin-top要素の既知の高さの半分である負の値を使用します。この場合は --9pxです。

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

  • アプローチ 5 -line-heightメソッド (柔軟性が最も低い - 推奨されません):

    例はこちら

    場合によっては、親要素の高さが固定されます。垂直方向のセンタリングの場合line-height、親要素の固定高さに等しい値を子要素に設定するだけです。

    このソリューションは場合によっては機能しますが、この のように複数行のテキストがある場合は機能しないことに注意してください。

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}
<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

于 2013-10-19T02:07:52.190 に答える
6

このコード スニペットを実行すると、垂直方向と水平方向に配置された div が表示されます。

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

于 2016-11-03T18:35:29.793 に答える
2

Div をページの中央に配置するcheck the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<div id="vh">Div to be aligned vertically</div>

更新 別のオプションは、フレックスボックスを使用することです check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

于 2016-02-04T23:06:23.150 に答える
2

以下は、望ましい結果を得るためのフレックスボックスアプローチです

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

于 2016-03-13T13:46:27.990 に答える
0
  • アプローチ6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}
<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }
于 2016-02-02T12:52:14.600 に答える
0

テキストの配置のみについての場合は、 これを使用するだけで非常に簡単になります。

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

父のスタイルとかそういうものは必要ありません。もちろん、場合によっては、父親がいくつかのスタイル プロパティを持っている場合、このソリューションでは子供に影響を与える可能性があり、このソリューションは適切に機能しません。

于 2022-01-16T10:49:34.973 に答える