Hallo zusammen,
ich habe mal wieder ein schönes Problem. Und zwar funktioniert das text-align: center; bei einem Element und bei einem anderen wiederum nicht.
Seht selbst:
[Blockierte Grafik: http://fs5.directupload.net/images/151002/qt7nzyuf.png]
Ich vermute mal, dass es irgendwie an der Flexbox liegt, habe aber kein Schimmer woran genau.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Startseite</title>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="topWrap">
<header>
<div id="wrap_logo">
<h1 id="logo">Carblog</h1>
</div>
<div id="profileQuickView">
<img id="profile-img" src="" alt="Profilbild von XYZ">
<div id="profile">
<div id="profile-name">
<p>Profil:<br>
Fritz777</p>
</div>
<div id="profile-car">
<p>Auto:<br>
Audi A5</p>
</div>
</div>
</div>
<form id="wrap_search-bar">
<input id="search-bar" name="search" type="search" placeholder="Suchleiste">
</form>
<div id="controls">
<a href="#messenger">
<div id="messenger-button">
<p>Messenger Button</p>
</div>
</a>
<a href="#menue">
<div id="menue-button">
<p>Menue Button</p>
</div>
</a>
</div>
</header>
<nav>
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="gruppen.php">Gruppen</a></li>
<li><a href="events.php">Events</a></li>
<li><a href="autohandel.php">Autohandel</a></li>
<li><a href="vekehrsmelder.php">Vekehrsmelder</a></li>
<li><a href="spotted.php">Spotted</a></li>
</ul>
</nav>
</div>
<div id="contentWrap">
<main>
<section id="section_left">
</section>
<section id="section_middle">
</section>
<section id="section_right">
</section>
</main>
<aside>
<p>Werbung</p>
</aside>
</div>
<footer>
</footer>
</body>
</html>
Alles anzeigen
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
display: flex;
flex-direction: column;
font-family: sans-serif;
font-size: 100%;
}
#topWrap {
background-color: green;
min-height: 17.627%;
}
#topWrap header {
background-color: #BD0023;
height: 74.23%;
display: flex;
}
#topWrap header #wrap_logo {
margin-left: 1.6%;
align-self: center;
}
#topWrap header #wrap_logo #logo {
font-size: 2.24rem;
font-weight: bold;
color: white;
}
#topWrap header #profileQuickView {
margin-left: 16%;
height: 70%;
width: 14.061%;
display: flex;
align-self: center;
}
#topWrap header #profileQuickView #profile-img {
height: 100%;
width: 35%;
background-color: white;
}
#topWrap header #profileQuickView #profile {
width: 65%;
height: 100%;
display: flex;
flex-direction: column;
}
#topWrap header #profileQuickView #profile p {
font-size: 0.8rem;
color: white;
padding: 0.7% 5.5%;
}
#topWrap header #profileQuickView #profile #profile-name {
width: 100%;
height: 50%;
}
#topWrap header #profileQuickView #profile #profile-car {
width: 100%;
height: 50%;
}
#topWrap header #wrap_search-bar {
display: flex;
margin-left: 5.335%;
height: 100%;
width: 17%;
align-items: center;
}
#topWrap header #wrap_search-bar input#search-bar {
border-radius: 0.312rem;
text-align: center;
border: none;
width: 100%;
height: 25%;
}
#topWrap header #controls {
background-color: blue;
display: flex;
margin-left: 6%;
width: 17%;
justify-content: space-around;
height: 70%;
align-self: center;
}
#topWrap header #controls a {
width: 30%;
}
#topWrap header #controls #messenger-button {
background-color: white;
height: 100%;
border-radius: 50%;
}
#topWrap header #controls #messenger-button p {
font-size: 0.56rem;
height: 100%;
display: flex;
align-items: center;
text-align: center;
}
#topWrap header #controls #menue-button {
background-color: white;
height: 100%;
border-radius: 50%;
}
#topWrap header #controls #menue-button p {
font-size: 0.56rem;
height: 100%;
display: flex;
align-items: center;
text-align: center;
}
#topWrap nav {
background-color: #FF011F;
height: auto;
}
#topWrap nav ul {
}
#topWrap nav ul li {
}
#topWrap nav ul li a {
}
#contentWrap {
background-color: orange;
min-height: 78.16%;
}
#contentWrap main {
background-color: #00FF00;
min-height: 78.16%;
width: 86.822%;
}
#contentWrap main section {
background-color: #E9E7E7;
min-height: 92%;
}
#contentWrap main #section-left {
width: 20%;
}
#contentWrap main #section-middle {
width: 42.158%;
}
#contentWrap main #section-right {
width: 16.863%;
}
#contentWrap aside {
background-color: #bbb;
min-height: 78.16%;
width: 13.177%;
}
footer {
background-color: #BD0023;
min-height: 4.213%;
}
Alles anzeigen
Ich hoffe, es kann mir jemand helfen. Schon mal vielen Dank im Voraus auf jeden Fall.
MfG
JR Cologne