[HTML & CSS] Titel H1 boven border centreren.

[richiewollie]

Beste,

ik ben een beginner en ik kom niet uit.

Ik wil een titel (H1) boven een border centreren plaatsen. En trouwens ik heb 2 # hashtags gebruikt omdat ik ga one page maken en met scroll-behavior: smooth;

Hoe kan ik H1 boven border plaatsen?

https://codepen.io/richiewollie/pen/OJQJxjz

<div class="container">
<div id="blogpost">
<h1>Blog</h1>
<div class="blog">
<p> <b>30-4-22</b><br><br> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reiciendis sapiente a voluptatibus quam veniam eligendi, at iusto laborum accusamus error exercitationem esse nisi repellat omnis illum vero voluptatem qui aperiam labore quos dolore ullam placeat. Commodi quod cumque exercitationem ad vel beatae alias voluptates quibusdam earum nostrum dignissimos aliquid, deserunt laudantium quae quisquam dolorum harum, explicabo tempore atque sint quaerat possimus, reiciendis in? Molestiae quidem numquam aperiam quam, quia unde blanditiis consequatur. Eum delectus veniam saepe asperiores impedit voluptas, officiis aliquam aliquid suscipit autem laudantium facere nemo ipsum recusandae perferendis architecto sit quo labore fugit magnam quae obcaecati! Commodi. </p>
</div>
</div>
</div>

.container {
display: flex;
justify-content: center;
margin-top: 150px;
width: 100%;
align-items: center;
}
#blogpost{
display: flex;
justify-content: center;
height: 100%;
width: 100%;
background-color: #ffffff;
}
#blogpost h1 {
display: inline-block;
justify-content: center;
color: #000000;
}
.blog {
display: flex;
justify-content: center;
border: #000000;
border-style: solid;
border-width: 3px;
border-radius: 25px;
width: 300px;
height: auto;
padding: 10px;
margin: 25px;
box-shadow: 5px 0px 10px 10px black;
}
.blog h1 {
color: #000000;
text-align: center;
}
.blog p {
color: #000000;
font-size: large;
}

[Anoniem: 80910]

Je kan position: relative gebruiken op je h1 en dan top: -50px dan heb je de h1 buiten je border, breedte van h1 even breed als .blog en dan text-align: center op h1 plaatsen

[eekhoorn12]

Ik zie dat je al goed bezig bent door flexbox te gebruiken.

Door de juiste combinatie van `flex-direction` en `align-items` op je `#blogpost` moet het waarschijnlijk lukken wat je wilt.

Dit vind ik altijd een goeie resource om flexbox beter te begrijpen, en door te hebben wat alle instellingen doen https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[frAmEd]

code:

flex-direction:column;
 align-items:center;

Bovenstaande toevoegen aan #blogpost. Hiermee verander je de richting van flexbox naar 'op elkaar' in plaats van naast elkaar. De titel komt daarmee boven de border. Align-items zorgt voor het centreren van de elementen.

[richiewollie]

thx allemaal voor de reacties en het is gelukt! thx...