Vraag Tekst verticaal naast een afbeelding uitlijnen?


Waarom niet vertical-align: middle werk? En toch, vertical-align: top  doet werk.

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

1684
2018-01-28 21:01


oorsprong


antwoorden:


Eigenlijk is het in dit geval vrij simpel: pas de verticale lijn op de afbeelding toe. Omdat het allemaal op één regel staat, is het echt de afbeelding die u wilt uitlijnen, niet de 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>

Getest in FF3.

U kunt nu flexbox gebruiken voor dit type lay-out.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1899
2018-01-28 21:10



Hier zijn enkele eenvoudige technieken voor verticaal uitlijnen:

Eenregelig verticaal uitlijnen: middelste

Deze is eenvoudig: stel de regelhoogte van het tekstelement gelijk aan dat van de container

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

Meerdere regels verticaal uitlijnen: onderaan

Plaats absoluut een binnenste div ten opzichte van de container

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

Meerdere regels verticaal uitlijnen: middelste

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

Als u oude versies van IE <= 7 moet ondersteunen

Om dit over de hele linie goed te laten werken, moet je de CSS een beetje hacken. Gelukkig is er een IE-bug die in ons voordeel werkt. omgeving top:50% op de container en top:-50% op de innerlijke div, kunt u hetzelfde resultaat bereiken. We kunnen de twee combineren met een andere functie die IE niet ondersteunt: geavanceerde CSS-kiezers.

<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>

Variabele containerhoogte verticaal-uitgelijnd: middelste

Deze oplossing vereist een iets modernere browser dan de andere oplossingen, omdat deze gebruikmaakt van de transform: translateY eigendom. (http://caniuse.com/#feat=transforms2d)

Als u de volgende 3 CSS-regels op een element toepast, wordt deze verticaal gecentreerd binnen het bovenliggende element, ongeacht de hoogte van het bovenliggende element:

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

317
2018-01-28 21:45



Verander jouw div in een flexcontainer:

div {display:flex;}


Er zijn nu twee methoden om de uitlijning voor alle inhoud te centreren:

Methode 1:

div {align-items:center;}

DEMO 


Methode 2:

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

DEMO 


Probeer verschillende waarden voor breedte en hoogte op de img en verschillende tekengroottewaarden op de span en je zult zien dat ze altijd in het midden van de container blijven.


79
2018-03-24 07:54



U moet solliciteren vertical-align: middle aan beide elementen om het perfect gecentreerd te hebben.

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

De geaccepteerd antwoord centreert het pictogram ongeveer de helft van de x-hoogte van de tekst ernaast (zoals gedefinieerd in de CSS-specificaties). Dat is misschien goed genoeg, maar kan een klein beetje afwijken, als de tekst stijgingen of afstammelingen alleen boven of onder opvalt:

centered icon comparison

Aan de linkerkant is de tekst niet uitgelijnd, aan de rechterkant is deze zoals hierboven weergegeven. Hierin is een live demo te vinden artikel over vertical-align.

Heeft iemand gesproken over waarom? vertical-align: top werkt in het scenario? De afbeelding in de vraag is waarschijnlijk groter dan de tekst en definieert dus de bovenrand van het lijnvak. vertical-align: top op het spanelement plaatst het dan gewoon bovenaan het regelvak.

Het belangrijkste verschil in gedrag tussen vertical-align: middle en top is dat de eerste elementen verplaatst ten opzichte van de basislijn van de doos (deze wordt geplaatst waar nodig om alle verticale uitlijningen te vervullen en voelt dus eerder onvoorspelbaar) en de tweede ten opzichte van de buitenste grenzen van het lijnvak (wat meer tastbaar is).


68
2017-09-11 12:58



De techniek die in het geaccepteerde antwoord wordt gebruikt, werkt alleen voor tekst met één lijn (demonstratie), maar geen meerregelige tekst (demonstratie) - zoals opgemerkt.

Als iemand verticaal gemixte tekst verticaal moet centreren naar een afbeelding, zijn hier een paar manieren (Methoden 1 en 2 geïnspireerd door dit artikel van CSS-Tricks)

Methode # 1: CSS-tabellen (VIOOL) (IE8 + (kan ik gebruiken))

CSS:

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

Methode # 2: pseudo-element op container (VIOOL) (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 */
}

Methode # 3: Flexbox (VIOOL) (kan ik gebruiken)

CSS (De bovenstaande viool bevat voorvoegsels van leveranciers):

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

47
2017-12-24 21:06



Deze code werkt zowel in IE als in FF:

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

23
2017-07-02 14:41



Omdat je de line-height tot de hoogte van de div om dit te laten werken


16
2018-01-28 21:05



Kortom, je moet naar CSS3 gaan.

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

9
2017-11-29 18:24



Voor de goede orde, uitlijning "commando's" zouden niet moeten werken op een SPAN, omdat het een is in lijn tag, niet een blokniveau label. Dingen zoals uitlijning, marge, opvulling, enz. Werken niet op een inline-tag omdat het doel van inline niet is om de tekststroom te verstoren.

CSS deelt HTML-tags op in twee groepen: in-line en block-level. Zoeken "css block vs inline" en een geweldig artikel verschijnt ...

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

(Het begrijpen van de belangrijkste CSS-principes is een sleutel tot het niet zo vervelend zijn)


8
2017-11-18 13:24



Een ander ding dat je kunt doen is de tekst instellen line-height naar de grootte van de afbeeldingen in de <div>. Stel de afbeeldingen vervolgens in op vertical-align: middle;

Dat is serieus de gemakkelijkste manier.


8
2018-01-12 14:52



Gebruik line-height:30px voor de overspanning zodat de tekst overeenkomt met de afbeelding:

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

7
2018-05-20 23:50