CSS: text unten mittig, wie?

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Die CSS-Eigenschaft bottom kennt keinen Wert "center". Zudem gehst Du davon aus, dass das Element die volle Breite einnimmt. Ist aber nicht so. Sobald Du mit absoluter Positionierung arbeitest musst Du immer dran denken auch die Größe des Elements ggfs. selbst angeben zu müssen.

Du hast 2 Lösungsmöglichkeiten:

a)

text-align: center; position: absolute; bottom: 0;left: 0;right: 0;

Grund: mit den beiden Angaben für top und right wird das Element über die gesamte zur Verfügung stehende Breite gezogen. Dadurch kann sich der Text dann auch zentriert anordnen.

b)

text-align: center; position: absolute; bottom: 0;width: 100%;

Ist quasi genau wie a) nur dass die Breite konkret angegeben wird.

Woher ich das weiß:
Berufserfahrung

.box {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    padding: 20px;

    margin-left: -100px;

    margin-top: -100px;

    background: #fff;

    box-sizing: border-box;

}

das geht. Habe es gerade probiert. Es gibt noch eine schönere Kodierung, mit margin:auto auto und einem zweiten umschließenden div.

Vermutlich stimmt das Absatzformat nicht, oder es ist nicht genügend Platz da.
Ergänze noch die CSS-Angabe des Containers: width: 100%;

Woher ich das weiß:
Berufserfahrung

Bei meiner HTML/CSS Seiter verschiebt sich der Text immer nach unten?

Hallo, bei meiner HTML/CSS Seite verschiebt sich der Text immer aus den sections raus. Kann mir da jemand helfen?

Seite: http://188.68.52.138/

Bild: https://www.bilder-upload.eu/bild-f10022-1539441178.png.html

...zur Frage

HTML - Text vertikal zentrieren?

Hat jemand von euch eine Idee warum die Überschrift nicht mittig zentriert wird? Ich habe es mit vertical-align, align-content und align-items usw probiert aber nichts zeigt einen Effekt.

https://images.gutefrage.net/media/fragen/bilder/html---text-vertikal-zentrieren/0_big.png?v=1516395008803"/>

...zur Frage

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zur Frage

HMTL/CSS - Wie kann ich ein Img in einem Div zentrieren?

Moin,

hat jemand eine Idee, wie ich über meiner Navbar ein 100px Image mit CSS genau mittig positioniere? Die Ansätze, die ich bis jetzt im Internet gefunden habe, waren nicht besonders hilfreich, was meinen Fall angeht...

Das wäre der html-Ausschnitt...:

<html>
    <body>
        <header>
            <div class="navbar-body">
                <img class="navbar-logo" src="logo_navbar.png"></img>
            </div>
        </header>
    </body>
</html>

...und das der für CSS:

.navbar-body{
    color: FFFFFF;
    background-color: 1F1F1F;
    font-family: Arial Black;
    font-size: 20px;
    height: 80px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-logo{
    height: 100px;
    margin: 30px auto 0;
}

Mein Problem ist, dass sich bei "margin: auto" und "display: block" zwar die Grafik mittig positioniert, aber dafür den Nav-Container mit verschiebt. Hat hier jmd eine Lösung parat?
LG

...zur Frage

In Mitte verschieben (HTML5)?

Hey, ich habe eine Frage!

Ich habe was mit HTML5 und CSS geschrieben und kriege etwas nicht in die Mitte.

HTML5:

<div id="Telefon">

<a align="center" id="Kontaktieren" href="tel:">Kontaktieren sie uns!</a>

</div>

und hier der CSS:

#Kontaktieren {
	display: block;
	margin-top: 1050px;
	width: 200px;
	height: 50px;
	background: #e2e2e2;
	border: 1px solid #e2e2e2;
	border-radius: 5px;
	width: 200px;
	height: 50px;
	color: #222;
	font-family: Arial;
	margin-left: 5px;
	font-size: 20px;
	width: 200px;
	height: 50px;
	line-height: 50px;
}

Kontaktieren:hover {

color: white;
border: 1px solid #222;
border-radius: 5px;
background: #222;
}

Mit padding-left: ...;

margin-left: ...;

align: center;

text-align: center;

funktioniert es nicht?

...zur Frage

Welchen teil von der CSS Datei muss ich ändern?

Hallo. Was muss ich in der global.css datei von mybb ändern damit die leiste mit dem "Shoutbox" text drin einen hintergrund bekommt? Hier mal 2 screenshots von der shoutbox http://puu.sh/oqYQh/15827428eb.png puu.sh/oqYS7/4d3874c3b7.png

Hier ist der CSS part von der Shoutbox: toter Link

...zur Frage

Was möchtest Du wissen?