html - Lijn de tekst aan naast een afbeelding uit.

Waarom niet vertical-align: middleWerk? En toch, vertical-align: topwerkt .

span{
  vertical-align: middle;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

Antwoord 1, Autoriteit 100%

In dit geval is het in dit geval vrij eenvoudig: de verticaal toepassen op de afbeelding. Omdat het allemaal in één regel is, is het echt het beeld dat u wilt uitgelijnd, niet de tekst.

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

Antwoord 2, Autoriteit 14%

Hier zijn enkele eenvoudige technieken voor verticaal-uitlijnen:

One-line verticaal-uitlijnen: Midden

Deze is eenvoudig: stel de lijnhoogte in van het tekstelement om gelijk te zijn aan die van de container

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

Meerlijnen Verticaal-uitlijnen: onderaan

Plaats absoluut een innerlijke 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>

Meerlijnen Verticaal-Uitlijnen: Midden

<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 & LT; = 7

moet ondersteunen

Om dit correct over het bord te laten werken, moet je de CSS een beetje hacken. Gelukkig is er een dwz bug die in ons voordeel werkt. Instelling 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, dwz niet ondersteunen: geavanceerde CSS-selectors.

<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-uitlijnen: midden

Deze oplossing vereist een iets modernere browser dan de andere oplossingen, omdat het gebruik maakt van de transform: translateYeigendommen. (http://caniuse.com/#Feat=transforms2D )

Het toepassen van de volgende 3 regels van CSS naar een element centreer het verticaal in zijn ouder, ongeacht de hoogte van het ouderelement:

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

Antwoord 3, Autoriteit 4%

Wijzig uw divin een flexcontainer:

div { display:flex; }

Nu zijn er twee methoden om de uitlijningen te centreren voor alle inhoud:

Methode 1:

div { align-items:center; }

Demo

Methode 2:

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

Demo

Probeer verschillende breedte- en hoogtewaarden op de imgen verschillende lettersgroottewaarden op de spanen u zult zien dat ze altijd in het midden van de container blijven.

Antwoord 4, Autoriteit 4%

U moet van toepassing zijn vertical-align: middleop beide elementen om het perfect te laten staan.

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

Antwoord 5, autoriteit 3%

De techniek die in het geaccepteerde antwoord wordt gebruikt, werkt alleen voor tekst met één regel (demo) , maar geen tekst met meerdere regels (demo) – zoals daar vermeld.

Als iemand meerregelige tekst verticaal op een afbeelding moet centreren, zijn hier een paar manieren:
(Methoden 1 en 2 geïnspireerd op dit CSS-Tricks-artikel)

Methode #1: CSS-tabellen (FIDDLE) ( IE8+ (caniuse))

CSS:

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

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

Methode #3: Flexbox (FIDDLE) (caniuse)

CSS(de bovenstaande viool bevat voorvoegsels van leveranciers):

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

Antwoord 6

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>

Antwoord 7

Omdat je de line-heightmoet instellen op de hoogte van de div om dit te laten werken

Antwoord 8

Voor de goede orde, uitlijningsopdrachten zouden niet moeten werken op een SPAN, omdat het een in-line-tag is en geen tag op blokniveau. Dingen zoals uitlijning, marge, opvulling, enz. werken niet op een in-line tag, omdat het punt van inline niet is om de tekststroom te verstoren.

CSS verdeelt HTML-tags in twee groepen: in-line en op blokniveau. Zoek “css block vs inline” en er verschijnt een geweldig artikel…

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

(Het begrijpen van de belangrijkste CSS-principes is een sleutel om het niet zo vervelend te maken)

Antwoord 9

Kortom, je moet CSS3 gebruiken.

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

Antwoord 10

Gebruik line-height:30pxvoor de span zodat de tekst is uitgelijnd met de afbeelding:

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

Antwoord 11

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

Dat is serieus de gemakkelijkste manier.

Antwoord 12

Ik heb nog geen oplossing gezien met marginin een van deze antwoorden, dus hier is mijn oplossing voor dit probleem.

Deze oplossingwerkt alleen als je de breedte van je afbeelding weet.

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

De 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;
}

Antwoord 13

Schrijf deze span-eigenschappen op

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

Gebruik display:inline-block;wanneer u de eigenschap vertical-aligngebruikt. Dit zijn bijbehorende eigenschappen

Antwoord 14

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

Ik gebruik over het algemeen 3px in plaats van top. Door die waarde te verhogen/verlagen, kan de afbeelding worden gewijzigd in de gewenste hoogte.

Antwoord 15

Je kunt de afbeelding instellen als inline elementmet de eigenschap display

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

Antwoord 16

Op een knop in jQuery mobile kun je deze bijvoorbeeld een beetje aanpassen door deze stijl op de afbeelding toe te passen:

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

Antwoord 17

Multiline-oplossing:

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

Werkt in alle browers en IE9 +

Antwoord 18

Het kan verwarrend zijn, ben ik het ermee eens. Probeer het gebruik te maken van tabelfuncties. Ik gebruik deze eenvoudige CSS-truc om modals in het midden van de webpagina te positioneren. Het heeft grote browserondersteuning:

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

en CSS-onderdeel:

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

Merk op dat u moet stylen en de grootte van de afbeelding en het tabelcontainer aanpassen om het te laten werken als u wenst. Genieten.

Antwoord 19

Ten eerste Inline CSS wordt helemaal niet aanbevolen, het maakt echt uw HTML.

Voor het uitlijnen van afbeelding en span, kunt u eenvoudig doen 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>

Antwoord 20

Niet zeker waarom het niet wordt weergegeven in de browser van je navigatie, maar ik gebruik normaal gesproken een fragment als dit wanneer ik probeert een koptekst met een afbeelding en een gecentreerde tekst weer te geven, hoop dat het helpt!

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('https://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="https://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Antwoord 21

met `flex property`in CSS.

Om tekst verticaal uit te lijnen door te gebruiken in Flex met align-items:center;Als u tekst horizontaal wilt uitlijnen door in Flex te gebruiken met justify-content:center;.

div{
  display: flex;
  align-items: center;
}

<div>
  <img src="https://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Antwoord 22

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

Antwoord 23

Dit wil je waarschijnlijk:

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

Zoals anderen hebben gesuggereerd, probeer vertical-alignop de afbeelding:

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

CSS is niet vervelend. Je leest gewoon niet de documentatie. ;P

Previous articleLINQ’s Distinct() op een bepaalde eigenschap

Next article‘react-scripts’ wordt niet herkend als een intern of extern commando, bruikbaar programma of batchbestand

Lijn de tekst aan naast een afbeelding uit.