Div-da vertikal markaz elementlari

div1 ichki elementlarini vertikal markazda saqlashni xohlayman.

display: table-cell dan foydalansam, div1 display menyusida ko'rganingizdek, elementlarni vertikal ravishda egallaydi, lekin elementlar yuqoriga va markazlashtirilmagan.

Lekin agar display: flex dan foydalansam, u elementlarni markazda ushlab turadi, lekin elementlar gorizontal tarzda hizalanadi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.div1 {
  height: 200px;
  width: 100px;
  background: white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  display: table-cell;
  vertical-align: middle;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
  dispaly: block;
  overflow: hidden;
}

.underline {
  position: relative;
  height: 20px;
  width: 100%;
  background: black;
}
<div class="div1">
  God Bless us all.
  <div class="underline"></div>
</div>
</div> </div>

Jsfiddle: https://jsfiddle.net/c15dmfws/

1

6 javoblar

Sizda keraksiz kod bor edi. Men biroz tozalab qo'ydim.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.div1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100px;
  background: whitesmoke;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
}

.underline {
  height: 20px;
  width: 100%;
  background: black;
}
<div class="div1">
  God Bless us all.
  <div class="underline"></div>
</div>
</div> </div>

jsFiddle

3
qo'shib qo'ydi
Bu juda yaxshi ishlagan, rahmat :)
qo'shib qo'ydi muallif WjNa, manba

yangilangan snippet

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.div1{
  height:200px;
  width:100px;
  background:white;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}
<div class="div1">
  God Bless us all.
  <div class="underline"></div>
</div>
</div> </div>
2
qo'shib qo'ydi

Kerakli tarzda ishlatiladigan display: flex muammoni hal qiladi.

Xususiyatlardan foydalaning:

 justify-content: center;
 align-items: center;

quyidagi misolda bo'lgani kabi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: black;
}

.two {
  background-color: blue;
 }
<div class="one">
  
  <div class="two">
     hello
  </div>
  
</div>
</div> </div>
2
qo'shib qo'ydi

Ko'rish uchun .div1 ni tanlang: jadval; ko'rsatilmasin: jadval-hujayra; ...

0
qo'shib qo'ydi
jsfiddle.net/4b6xnjo3 bu erda yaxshi ishlaydi
qo'shib qo'ydi muallif Arne Banck, manba
Faqat harakat qildi, ishlamadi
qo'shib qo'ydi muallif WjNa, manba

Buni ko'ring.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>

<head>
    
</head>

<body>
    <div class="container">
        <div class="div1">
            God Bless us all.
            <div class="underline"></div>
        </div>
    </div>
</body>

</html>
</div> </div>

0
qo'shib qo'ydi

Bu erda https://jsfiddle.net/bn430he1/ , harakat qilib ko'ring.

Kontentni boshqa divga o'girib, div CSS-ning balandlik xususiyatini bering: auto; va ekranni olib tashlang: jadval hujayrasi; div1dan

Umid qilamanki ...

<div class="div1">
<div class="aligned">
  God Bless us all.
  <div class="underline"></div>
  </div>
</div>

.aligned {
  height:auto;
}

.div1{
  width:100px;
  background:white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}
0
qo'shib qo'ydi