div 내에서 텍스트를 세로로 정렬

div 내에서 텍스트를 세로로 정렬 [중복]

---

이 질문에 이미 답변이 있습니다.

• div에서 텍스트를 세로로 정렬하려면 어떻게합니까? 29 답변

아래 코드 ( JS Fiddle의 데모 로도 제공됨 )는 이상적으로 원하는대로 텍스트를 중간에 배치하지 않습니다. 속성을 div사용하더라도 에서 텍스트를 세로로 가운데에 배치하는 방법을 찾을 수 없습니다 margin-top. 어떻게 할 수 있습니까?

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

---

텍스트 콘텐츠에 대한 컨테이너를 만듭니다 span.

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle

---

Andres Ilich가 맞습니다. 누군가 그의 말을 놓친 경우를 대비해서 ...

A.) 텍스트가 한 줄만있는 경우 :

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

B.) 여러 줄의 텍스트가있는 경우 :

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

---

2016 년 4 월 10 일 업데이트

이제 Flexbox를 사용하여 항목을 수직 (또는 수평) 정렬해야합니다.

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

A good guide to flexbox can be read on CSS Tricks. Thanks Ben (from comments) for pointing it out. I didn't have time to update.

---

A good guy named Mahendra posted a very working solution here.

The following class should make the element horizontally and vertically centered to its parent.

.absolute-center {

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

---

The accepted answer doesn't work for multi-line text.

I updated the JSfiddle to show CSS multiline text vertical align as explained here:

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

It also works with <br /> in "yet another..."

---

Try this:

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

---

To make Omar's (or Mahendra's) solution even more universal, the block of code relative to Firefox should be replaced by the following:

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

The problem with Omar's code, otherwise operative, arises when you want to center the box in the screen or in its immediate ancestor. This centering is done either by setting its position to

position: relative; or position:static; (not with position:absolute nor fixed).

And then margin: auto; or margin-right: auto; margin-left: auto;

Under this box center aligning environment, Omar's suggestion does not work. It doesn't work either in Internet Explorer 8 (yet 7.7% market share). So for Internet Explorer 8 (and other browsers), a workaround as seen in other above solutions should be considered.

---

This is simply supposed to work:

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

I tried it on your demo.

---

This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another span and specify its height with line-height. The trick to multiple lines is resetting the inner span's line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

DEMO

Of course the outer span could be a div or what have you.

---

Add a vertical align to the CSS content #column-content strong too:

#column-content strong {
    ...
    vertical-align: middle;
}

Also see your updated example.

=== UPDATE ===

With a span around the other text and another vertical align:

HTML:

... <span>yet another text content that should be centered vertically</span> ...

CSS:

#column-content span {
    vertical-align: middle;
}

Also see the next example.

---

I know it’s totally stupid and you normally really shouldn’t use tables when not creating tables, but:

Table cells can align multiple lines of text vertically centered and even do this by default. So a solution which works quite fine could be something like this:

HTML:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

CSS (make the table item always fit to the box div):

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

See here: http://www.cssdesk.com/LzpeV

참고URL : https://stackoverflow.com/questions/9249359/vertically-align-text-within-a-div