div의 요소를 수직으로 정렬하려면 어떻게 해야 합니까?

div의 요소를 수직으로 정렬하려면 어떻게 해야 합니까?

는 나나 a a a가 있다div와 1개의 이미지가 .h1모두 div 안에서 서로 옆으로 수직으로 정렬해야 합니다. 중 는 '''로 해야 '''absolute에 div.

이것이 모든 일반적인 브라우저에서 작동하기 위해 필요한 CSS는 무엇입니까?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.오해'의가 바탕이 되어 .vertical-align이 에서는 다음과같이 설명하고 있습니다.

이해 또는 Gavin Kistner의 "How (Not) To Verticalally Center Content" (수직적으로 콘텐츠를 중앙으로 집중시키는 방법)

"How to center in CSS"는 다양한 상황에서 필요한 CSS 센터링 속성을 찾는 데 도움이 되는 훌륭한 웹 도구입니다.

---

한마디로:

• 인라인 요소(및 인라인 요소만)는 다음 방법으로 컨텍스트 내에서 수직으로 정렬할 수 있습니다.vertical-align: middle그러나 "콘텍스트"는 부모 컨테이너 전체의 높이가 아니라 부모 컨테이너가 속한 텍스트 줄의 높이입니다.jsfiddle 예제
• 블록 요소의 경우 수직 정렬이 더 어렵고 특정 상황에 따라 크게 달라집니다.
  • 내부 요소가 고정된 높이를 가질 수 있는 경우 해당 위치를 지정할 수 있습니다.absolute 다음에 해 주세요.height,margin-top ★★★★★★★★★★★★★★★★★」topposition. jsfiddle 예시
  • 중심 요소가 단일 선으로 구성되고 상위 높이가 고정된 경우 단순히 용기의 크기를 설정할 수 있습니다.line-height그 높이를 채우기 위해.이 방법은 내 경험상 꽤 다재다능하다.jsfiddle 예시
  • …이런 특수한 경우가 더 많습니다.

Flexbox 지원이 증가하고 있기 때문에 이 CSS를 포함 요소에 적용하면 포함된 모든 항목이 수직으로 중앙에 배치됩니다(예: 정렬 자체를 지정하는 항목 제외).

.container {
    display: flex;
    align-items: center;
}

Internet Explorer 10 이전 버전(< 4.4 (KitKat))도 대상으로 해야 하는 경우 접두사 버전을 사용하십시오.Android 브라우저:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

매우 간단한 코드를 사용했습니다.

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

물, 이, 이, 이, 이, 이, obviously, obviously, obviously, obviously, obviously, obviously, obviously, obviously, obviously, obviously, obviously.class ★★★#id결과는 변하지 않습니다.

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

나한테는 효과가 있었어.

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

요소를 수직 및 수평으로 정렬

이 중 하나를 사용합니다.결과는 동일합니다.

1. 부트스트랩 4
2. CSS3

1. 부트스트랩 4.3+

정렬의 : 직직정정 for for:d-flex align-items-center

정렬의 경우: 평평정정 for for for:d-flex justify-content-center

및 위치 :d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2. CSS 3.

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container center">
    <div>I am in Center</div>
</div>

내 친구의 기술:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

데모를 해 주세요.

블록 요소를 중앙에 배치하려면(Internet Explorer 9 이상에서 작동) 래퍼가 필요합니다.div:

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

이 공식을 사용하면 균열이 발생하지 않고 항상 작동합니다.

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

모두 디바이드 내에서 수직으로 정렬되어야 합니다.

어떻게 정렬합니까?텍스트의 맨 위에 정렬된 이미지의 맨 위?

영상 중 하나가 div 내에 절대 위치해야 합니다.

DIV에 대해 절대적인 위치에 있습니까?혹시 당신이 찾고 있는 것을 스케치할 수 있을까요?

fd는 절대 위치 설정 및 디스플레이 조정 단계를 설명했습니다.H1이미지를 인라인으로 표시할 수 있습니다.여기에다가 '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까'를 수 vertical-align 예:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

이렇게 하면 머리글과 이미지가 합쳐지고 위쪽 가장자리가 정렬됩니다.다른 정렬 옵션이 있습니다. 설명서를 참조하십시오.또한 DIV를 드롭하고 이미지를 내부로 이동하는 것이 유리할 수 있습니다.H1element - .H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

거의 모든 방법에서 높이를 지정해야 하지만 높이가 없는 경우가 많습니다.

높이를 알 필요가 없는 CSS 3의 3행 트릭이 있습니다.

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

Internet Explorer 9에서도 지원됩니다.

벤더 프리픽스:

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

출처: CSS를 3줄만 사용하여 모든 것을 수직으로 정렬합니다.

부모 div에서 가운데 아이를 div로 만드는 세 가지 방법

• 절대 위치 결정 방법
• Flexbox 방식
• 변환/번역 방법

데모

/* Absolute Positioning Method */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* Flexbox Method */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* Transform/Translate Method */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

내 요령은 1행 1열의 테이블을 칸 안에 넣고 폭과 높이의 100%를 설정하고 vertical-align: middle: 속성인 vertical-align: middle:

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

바이올린: http://jsfiddle.net/joan16v/sbqjnn9q/

디스플레이 플렉스를 사용하여 먼저 정렬할 항목의 컨테이너를 래핑해야 합니다.

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

다음으로 다음 CSS 콘텐츠를 랩 div 또는 outdiv에 적용합니다.

.outdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS를 수직 중앙으로 사용하면 외부 컨테이너가 테이블처럼 작동하고 내용이 테이블 셀로 작동하도록 할 수 있습니다.이 형식에서는 객체가 중앙에 배치됩니다.:)

예를 들어 JSFiddle에 여러 개체를 중첩했는데 핵심 아이디어는 다음과 같습니다.

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

.circle {
  /* Act as a table so we can center vertically its child */
  display: table;
  /* Set dimensions */
  height: 200px;
  width: 200px;
  /* Horizontal center text */
  text-align: center;
  /* Create a red circle */
  border-radius: 100%;
  background: red;
}

.content {
  /* Act as a table cell */
  display: table-cell;
  /* And now we can vertically center! */
  vertical-align: middle;
  /* Some basic markup */
  font-size: 30px;
  font-weight: bold;
  color: white;
}

다중 객체의 예는 다음과 같습니다.

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

결과

https://jsfiddle.net/martjemeyer/ybs032uc/1/

CSS 3을 사용하여 div 내의 여러 텍스트 행을 수직으로 정렬하는 새로운 회피책을 찾았습니다(또한 UI를 아름답게 하기 위해 부트스트랩 v3 그리드시스템을 사용하고 있습니다).다음은 예를 제시하겠습니다.

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

제가 이해한 바로는 요소를 포함하는 텍스트의 직계 부모에는 어느 정도의 높이가 있어야 합니다.

CSS 함수 계산을 사용하여 요소의 크기를 계산하고 그에 따라 하위 요소를 배치할 수 있습니다.

HTML의 예:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

그리고 CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

데모 작성처: https://jsfiddle.net/xnjq1t22/

이 솔루션은 응답성이 뛰어나고 잘 작동합니다.div height그리고.width뿐만 아니라.

주의: calc 기능은 오래된 브라우저와의 호환성은 테스트되지 않았습니다.

부트스트랩 클래스만 사용하는 경우:

• div:class="container d-flex"
• 요소 내부 div:class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container d-flex mt-5" style="height:110px; background-color: #333;">
  <h2 class="m-auto"><a href="https://hovermind.com/">H➲VER➾M⇡ND</a></h2>
</div>

기본적으로 h1은 블록 요소이며 첫 번째 img 뒤의 행에 렌더링되며 두 번째 img가 블록 뒤의 행에 표시됩니다.

이를 방지하기 위해 h1에 인라인플로우 동작을 설정합니다.

#header > h1 { display: inline; }

div 내부에 img를 절대적으로 배치하는 경우, 올바르게 작동하기 전에 포함된 div를 "알려진 크기"로 설정해야 합니다.제 경험상, 기본 위치인 상대 위치로부터 다른 위치 속성을 변경해야 합니다.

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

이 기능을 사용할 수 있다면 div.header에서 높이, 폭, 위치 속성을 점진적으로 삭제하여 원하는 효과를 얻기 위해 필요한 최소한의 속성을 얻을 수 있습니다.

갱신:

다음은 Firefox 3에서 작동하는 전체 예입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Example of vertical positioning inside a div</title>
            <style type="text/css">
                #header > h1 { display: inline; }
                #header { border: solid 1px red; 
                          position: relative; }
                #img-for-abs-positioning { position: absolute;
                                           bottom: -1em; right: 2em; }
            </style>
        </head>
    
        <body>
            <div id="header">
                <img src="#" alt="Image 1" width="40" height="40" />
                <h1>Header</h1>
                <img src="#" alt="Image 2" width="40" height="40" 
                     id="img-for-abs-positioning" />
            </div>
        </body>
    </html>

새롭게 마음에 드는 방법은 CSS 그리드를 사용하는 것입니다.

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

디바 안에 있는 단세포 테이블을 사용해!셀과 테이블 높이를 100%로 설정하면 수직 정렬을 사용할 수 있습니다.

div 내부의 1셀 테이블은 수직 정렬을 처리하며 석기 시대로 거슬러 올라갑니다!

저에게는 다음과 같이 작용했습니다.

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

"a" 요소는 Bootstrap 클래스를 사용하여 버튼으로 변환되었으며, 이제 외부 "div" 내에서 수직으로 중앙에 배치되었습니다.

이건 제 개인적인 해결책입니다i내부의 요소div.

JSFiddle의 예

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

1년 이상 다음 솔루션(위치 및 라인 높이 없음)을 사용하고 있습니다.Internet Explorer 7 및 Internet Explorer 8에서도 사용할 수 있습니다.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

이것만:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

div 내부의 1셀 테이블은 수직 정렬을 처리하며 석기 시대로 거슬러 올라갑니다!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

다른 (응답형) 접근방식을 다음에 제시하겠습니다.

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

<div id="header" style="display: table-cell; vertical-align:middle;">

...

또는 CSS

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

브라우저 커버리지

언급URL : https://stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div