HTML & CSS Hands-On - Alignment - Start

by Karin Huber

HTML

<h2>Zentrierter Text</h2>

<div id="div1">
  <p>Zentrierter Text</p>
</div>

<h2>Zentriertes Bild</h2>

<div id="div2">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/220px-HTML5_logo_and_wordmark.svg.png" width="50">
</div>

<h2>Vertikal zentrierter Text mit padding 30px</h2>

<div id="div3">
  <p>Zentrierter Text</p>
</div>

<h2>Vertikal zentrierter Text mit line-height 60px</h2>

<div id="div4">
  <p>Zentrierter Text</p>
</div>

<h2>Vertikal zentrierter Text mit position & transform</h2>

<div id="div5">
  <div>Zentrierter Text</div>
</div>

<h2>Vertikal zentrierter Text mit Flexbox</h2>

<div id="div6">
  <div>Zentrierter Text</div>
</div>

CSS

div {
  border: 1px solid green;
  margin-bottom: 5px;
}

#div5 {
  height: 150px;
  position: relative;
}

#div6 {
  height: 150px;
}