CSS inline-block Zentrieren Inhalt

Ich habe 2 Probleme mit unter cssCSS inline-block Zentrieren Inhalt

#calendarWrap div{ 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     background: white; 
     border: 1px solid black; 
     text-align: center; 
     padding: 30px; 
} 

* { 
    box-sizing:border-box; 
}

https://jsbin.com/bononudiju/edit?html,css,output

Warum der Inhalt nicht vollständig ist Zentrum? Es ist etwas runter bis zum Boden, es sollte ein bisschen nach oben sein. Muss ich die Position manuell anpassen? Ich weiß, dass ich relative Position verwenden kann, aber kann ich es trotzdem zentrieren, unabhängig von Höhe und Breite?
Warum gibt es Gab zwischen den Boxen?

Quelle

2017-03-13 Alex Yong

Wollen Sie die Lücke oder entfernen? – Swellar

@CarlJan entfernen Sie es. Ich weiß nicht, warum es da ist. –

Die Lücke ist wegen der nächsten Zeile, versuchen Sie alle auszurichten, oder fügen Sie einen leeren Kommentar ein – Swellar

-1

du versuchen:

#calendarWrap div{ 
 
\t \t display: inline-block; 
 
\t \t width: 50px; 
 
\t \t height: 50px; 
 
\t \t background: white; 
 
\t \t border: 1px solid black; 
 
\t \t text-align: center; 
 
    line-height:50px; 
 
} 
 

 
* { 
 
    box-sizing:border-box; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    <div id="calendarWrap"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    </div> 
 

 
</body> 
 
</html>

Ersetzen Sie das Padding im Allgemeinen durch line-height und in dem Link, den Sie gesendet haben, scheint der Editor automatisch zu sperren, wenn Sie auf die Eingabetaste klicken.

Quelle

2017-03-13 03:29:44 gosi123

Wann Padding zu verwenden? Wann wird die Zeilenhöhe verwendet? –

Normalerweise verwende ich 'line-height', um eine genaue mittlere Ausrichtung zu erhalten, aber das ist natürlich nicht der Grund. Es ist nur eine persönliche Vorliebe von mir. In Ihrem Fall haben Sie also eine Höhe in Pixel, also bevorzuge ich stattdessen 'line-height'. Nur eine persönliche Vorliebe. – gosi123

Entfernen Sie die Polsterung. Fügen Sie line-height: 50px; hinzu.

Die Lücke zwischen den Boxen ist der physische Raum im HTML. Machen Sie das Elternteil font-size: 0.

Quelle

2017-03-13 03:25:12

Fügen Sie einfach float: left; zu Ihrem #calendarWrap div und die Polsterung ändern padding: 15px 0;

Quelle

2017-03-13 03:25:34

die Lücken zu entfernen, versuchen Sie dies:

<div id="calendarWrap"> 
    <div>1</div><!-- 
--><div>2</div><!-- 
--><div>3</div><!-- 
--><div>4</div><!-- 
--><div>5</div> 
</div>

Quelle

2017-03-13 03:27:11 Swellar

Warum wird das überhaupt benötigt? –

Dies ist die Lücken zu entfernen – Swellar

-1

Um den Abstand zwischen den Elementen zu entfernen, entfernen Sie den Leerraum zwischen den Elementen. Da diese inline-block sind (behandelt als inline), werden sie Leerraum innerhalb und zwischen den Blöcken bewahren. Und wenn Sie die Inhalte innerhalb dieser Boxen horizontal und vertikal zu zentrieren wollen, wäre der einfachste Weg, wahrscheinlich anzuwenden sein display: inline-flex; align-items: center; justify-content: center;

#calendarWrap div{ 
 
    display: inline-flex; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: white; 
 
    border: 1px solid black; 
 
    padding: 30px; \t 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
* { 
 
    box-sizing:border-box; 
 
}

<div id="calendarWrap"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div>

Quelle

2017-03-13 03:30:45

-1

Ich schlage vor, Sie verwenden display:table-cell; vertical-align:middle; text-align:center;. Das ist besser reproduzierbar.

#calendarWrap>div{ 
 
    display:table-cell; vertical-align:middle; width:50px; 
 
    height:50px; text-align:center; border:#000 solid 1px; 
 
    border-left:0; 
 
} 
 
#calendarWrap>div:first-child{ 
 
    border-left:#000 solid 1px; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <title>display centered</title> 
 
    </head> 
 
<body> 
 
    <div id='calendarWrap'> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-03-13 03:36:29 PHPglue

CSS inline-block Zentrieren Inhalt

Antwort

Verwandte Themen