Wyrównać tekst pionowo do obrazu?

Dlaczego nie vertical-align: middlezadziała? A jednak vertical-align: top robi pracę.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Właściwie w tym przypadku jest to dość proste: zastosuj wyrównanie pionowe do obrazu. Ponieważ wszystko jest w jednym wierszu, naprawdę jest to obraz, który chcesz wyrównać, a nie tekst.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Testowane w FF3.

Teraz możesz używać Flexboksa dla tego typu układu.

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Oto kilka prostych technik wyrównywania w pionie:

Jednoliniowe wyrównanie w pionie: środek

Ten jest łatwy: ustaw wysokość linii elementu tekstowego na równą wysokości kontenera

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Wiele linii w pionie: do dołu

Absolutnie umieść wewnętrzny div względem jego kontenera

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Wiele linii: wyrównanie w pionie: środek

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Jeśli musisz obsługiwać starsze wersje IE <= 7

Aby wszystko działało poprawnie, musisz nieco zhakować CSS. Na szczęście istnieje błąd IE, który działa na naszą korzyść. Ustawiając top:50%pojemnik i top:-50%wewnętrzny div, możesz osiągnąć ten sam rezultat. Możemy połączyć te dwa elementy za pomocą innej funkcji, której IE nie obsługuje: zaawansowanych selektorów CSS.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Zmienna wysokość pojemnika w pionie: w środku

To rozwiązanie wymaga nieco bardziej nowoczesnej przeglądarki niż inne rozwiązania, ponieważ korzysta z transform: translateYwłaściwości. ( http://caniuse.com/#feat=transforms2d )

Zastosowanie następujących 3 wierszy CSS do elementu spowoduje jego wyśrodkowanie w pionie w obrębie jego elementu nadrzędnego, niezależnie od wysokości elementu nadrzędnego:

position: relative;
top: 50%;
transform: translateY(-50%);

Zmień swój divkontener na elastyczny:

div { display:flex; }

Teraz są dwie metody wyśrodkowania linii trasowania dla całej zawartości:

Metoda 1:

div { align-items:center; }

PRÓBNY

Metoda 2:

div * { margin-top:auto; margin-bottom:auto; }

PRÓBNY

Wypróbuj różne wartości szerokości i wysokości imgi różne wartości rozmiaru czcionki na, spana zobaczysz, że zawsze pozostają na środku pojemnika.

Musisz zastosować vertical-align: middleoba elementy, aby były idealnie wyśrodkowane.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Odpowiedź Zaakceptowany robi Centre ikonę około połowie x wysokość tekstu obok niej (jak określono w specyfikacji CSS ). Co może być wystarczająco dobre, ale może wyglądać nieco nieprzyzwoicie, jeśli tekst ma wznoszenia lub zstępujące elementy wyróżniające się na górze lub na dole:

Po lewej tekst nie jest wyrównany, po prawej jest jak pokazano powyżej. Demo na żywo można znaleźć w tym artykule na temat wyrównania pionowego .

Czy ktoś mówił o tym, dlaczego vertical-align: topdziała w tym scenariuszu? Obraz w pytaniu jest prawdopodobnie wyższy niż tekst i tym samym określa górną krawędź pola linii. vertical-align: topna elemencie rozpiętości, a następnie po prostu umieszcza go na górze pola linii.

Główna różnica w zachowaniu między vertical-align: middlei toppolega na tym, że pierwsze ruchy elementów odnoszą się do linii bazowej ramki (która jest umieszczana wszędzie tam, gdzie jest to konieczne, aby spełnić wszystkie pionowe wyrównania i dlatego wydaje się raczej nieprzewidywalna ), a druga względem zewnętrznych granic ramki liniowej (która jest bardziej namacalne).

Technika zastosowana w zaakceptowanej odpowiedzi działa tylko w przypadku tekstu jednowierszowego ( demo ), ale nie tekstu wielowierszowego ( demo ) - jak tam wspomniano.

Jeśli ktoś chce wyśrodkować tekst wielowierszowy w pionie na obrazie, oto kilka sposobów (Metody 1 i 2 zainspirowane tym artykułem CSS-Tricks )

Metoda nr 1: Tabele CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Metoda nr 2: Pseudoelement na kontenerze ( FIDDLE ) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Metoda nr 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (powyższe skrzypce zawiera prefiksy dostawcy):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Ten kod działa zarówno w IE, jak i FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Ponieważ musisz ustawić line-heightwysokość div, aby to zadziałało

Zasadniczo musisz przejść do CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Dla przypomnienia, wyrównanie „poleceń” nie powinien pracować na rozpiętości, ponieważ jest to w linii tag, a nie na poziomie bloków tag. Rzeczy takie jak wyrównanie, margines, dopełnianie itp. Nie będą działać na znaczniku wbudowanym, ponieważ punktem wstawiania nie jest zakłócanie przepływu tekstu.

CSS dzieli tagi HTML na dwie grupy: liniową i blokową. Wyszukaj „css block vs inline”, a pojawi się świetny artykuł ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Zrozumienie podstawowych zasad CSS jest kluczem do tego, aby nie było tak denerwujące)

Użyj line-height:30pxdla zakresu, aby tekst był wyrównany z obrazem:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Inną rzeczą, którą możesz zrobić, to ustawić tekst line-heightna rozmiar obrazów w <div>. Następnie ustaw obrazy navertical-align: middle;

To naprawdę najłatwiejszy sposób.

Nie spotkałem jeszcze rozwiązania z marginżadną z tych odpowiedzi, więc oto moje rozwiązanie tego problemu.

To rozwiązanie działa tylko wtedy, gdy znasz szerokość swojego obrazu.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Ogólnie używam 3px zamiast top. Zwiększając / zmniejszając tę ​​wartość, obraz można zmienić na wymaganą wysokość.

Napisz te właściwości zakresu

span{
    display:inline-block;
    vertical-align:middle;
}

Użyj display:inline-block;Kiedy korzystasz z vertical-alignwłaściwości. Są to właściwości powiązane

Możesz ustawić obraz jako inline elementkorzystający z displaywłaściwości

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Na przykład na przycisku w jQuery mobile możesz go nieco ulepszyć, stosując ten styl do obrazu:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Rozwiązanie wielowierszowe:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Działa we wszystkich przeglądarkach i ie9 +

Zgadzam się, że może to być mylące. Spróbuj wykorzystać funkcje tabeli. Używam tej prostej sztuczki CSS do pozycjonowania modów na środku strony. Ma duże wsparcie przeglądarki:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

i część CSS:

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

Pamiętaj, że musisz stylizować i dopasować rozmiar obrazu i kontenera tabeli, aby działał tak, jak chcesz. Cieszyć się.

Po pierwsze, wbudowany CSS wcale nie jest zalecany, to naprawdę psuje twój HTML.

Aby wyrównać obraz i zakres, możesz po prostu zrobić vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Nie jestem pewien, dlaczego nie wyświetla się w przeglądarce nawigacji, ale zwykle używam takiego fragmentu, gdy próbuję wyświetlić nagłówek z obrazem i wyśrodkowanym tekstem, mam nadzieję, że to pomoże!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Prawdopodobnie chcesz tego:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Jak sugerują inni, spróbuj vertical-alignna obrazku:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS nie jest denerwujący. Po prostu nie czytasz dokumentacji . ; P