de-vraag
Więcej
Question

Wyrównaj tekst do pionu w div

Poniższy kod (dostępny również jako demo na JS Fiddle) nie pozycjonuje tekstu na środku, tak jak bym tego chciał. Nie mogę znaleźć żadnego sposobu na pionowe wyśrodkowanie tekstu w div, nawet używając atrybutu margin-top. Jak mogę to zrobić?

<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;        
}
Alexander Abakumov
Alexander Abakumov
Edytowane pytanie 29. stycznia 2019 в 4:00
Programowanie
css
vertical-alignment
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.
Solution / Answer

Utwórz kontener dla swojej zawartości tekstowej, być może 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

Carrie Kendall
Carrie Kendall
Edytowana odpowiedź 27. stycznia 2015 в 9:45
433

To ma po prostu działać:

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

Wypróbowałem to na twoim demo.

Peter Mortensen
Peter Mortensen
Edytowana odpowiedź 6. lipca 2019 в 2:26
13

Dodaj również pionowe wyrównanie do zawartości CSS #column-content strong:

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

Zobacz również swój zaktualizowany przykład.

=== AKTUALIZACJA ===

Z rozpiętością wokół innego tekstu i innym pionowym wyrównaniem:

HTML:

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

CSS:

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

Zobacz również następny przykład.

Peter Mortensen
Peter Mortensen
Edytowana odpowiedź 6. lipca 2019 в 2:28
3