>Div "vertical-align"<

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

14:58, 31.3.2015

Hey Lima-city Community,
Ich will auf meiner Webseite eine Leiste machen.
Dort drin sollen alle Elemente vertical zentriert sein.
Kann mir einer helfen?

HTML Teil:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="onTopBar">
		<ul>
                     <li><i> <img src="Bilder/ChatIcon.png" height="40" alt=""/>  Chat</i></li>
                     <li><i> <img src="Bilder/BriefIcon.png" height="40" alt=""/> Kontakt</i></li>
                     <li><i> <img src="Bilder/UserIcon.png" height="40" alt=""/>  TeraArts</i></li>
		</ul>
        
</div>

</body>
</html>

CSS Teil:

/* General */
i {
	font-family:Arial;
	padding:30px;
}

.onTopBar {
	background-color:#2c2c2c;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	margin:0 auto 0 auto;
	display:block;
}

.onTopBar ul {
	display:block;
	list-style:none;
	float:right;
	padding-right:50px;
	margin:0 auto 0 auto;
	color:#cdcdcd;
	font-size:33px;
	font-family:Myriad Hebrew;
}

.onTopBar ul li {
	float:left;
}

Habe vertical-align:middle; schon probiert.
Funktioniert nicht!

LG. TeraArts

Beitrag zuletzt geändert: 31.3.2015 14:58:40 von teraarts

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

hechma

hechma hat kostenlosen Webspace.

15:47, 31.3.2015

hallo teraarts,

ja vertical-align funktioniert nur bei inline-elementen, bzw tabellenzellen:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Startseite</title>
        <style type="text/css">
			i {
				font-family:Arial;
				padding:30px;
			}
			.onTopBar {
				background-color:#2c2c2c;
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:50px;
				margin:0px auto;
				display:table;
			}
			.onTopBar > ul {
				display:table-row;
				list-style:none;
				padding:0px;
				margin:0px;
				color:#cdcdcd;
				font-size:33px;
			}
			.onTopBar > ul > li {
				display:table-cell;
				text-align:center;
				vertical-align:middle;
			}
		</style>
    </head>
    <body>
        <div class="onTopBar">
            <ul>
                <li><i> <img src="Bilder/ChatIcon.png" height="40" alt=""/>  Chat</i></li>
                <li><i> <img src="Bilder/BriefIcon.png" height="40" alt=""/> Kontakt</i></li>
                <li><i> <img src="Bilder/UserIcon.png" height="40" alt=""/>  TeraArts</i></li>
            </ul>
        </div>
    </body>
</html>

in deinem beispiel werden elemente die immer 40px hoch sind in einem container angezeigt der immer 50px hoch ist - da würde ein simples padding-top:10px des containers natürlich auch reichen

lg hechma

Autor dieses Themas
teraarts

teraarts hat kostenlosen Webspace.

10:28, 1.4.2015
So wie du es geschrieben hast bekomme ich es nicht hin.
Vielleicht ist ja einer so nett und kann mir die Leiste mal zusammen basteln.

So soll es aussehen(nur die obere Leiste):
https://drive.google.com/file/d/0B6m2MgARdHemQ2VkNlE5Y0JvS1k/view?usp=sharing

Hier die Icons:

-Chat Icon:
https://drive.google.com/file/d/0B6m2MgARdHemOERyVE9DYVJKRjA/view?usp=sharing

-Brief Icon:
https://drive.google.com/file/d/0B6m2MgARdHemUWRaWThCcmdydVk/view?usp=sharing

-User Icon:
https://drive.google.com/file/d/0B6m2MgARdHembnpzTGhmdzh1UDA/view?usp=sharing

Irgedn wie verstehe ich net, wie ich die Icons und den Text vertical zentrieren kann.

GZ. TeraArts

P.S. Danke im Vorraus

Beitrag zuletzt geändert: 1.4.2015 10:32:31 von teraarts
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

11:41, 1.4.2015

teraarts schrieb:

Irgedn wie verstehe ich net, wie ich die Icons und den Text vertical zentrieren kann.

GZ. TeraArts

P.S. Danke im Vorraus

Der von dir gezeigte Screenshot zeigt eine horizontal zentrierte Menüleiste.
Autor dieses Themas
teraarts

teraarts hat kostenlosen Webspace.

17:21, 1.4.2015

Der von dir gezeigte Screenshot zeigt eine horizontal zentrierte Menüleiste.

hää?
was meinst du?

Beitrag zuletzt geändert: 1.4.2015 17:21:51 von teraarts
hechma

hechma hat kostenlosen Webspace.

14:04, 11.4.2015
hallo teraarts,

teraarts schrieb:...So soll es aussehen(nur die obere Leiste)...

aber auf dem bild ist die obere leiste weder horizontal noch vertikal zentriert !?! sie ist horizontal rechtsbündig ausgerichtet. wie willst du es denn nun ?

p.s.: das wort "Gallerie" gibt es nicht. entweder "Galerie" wie im deutschen oder "Gallery" wie im englischen

lg hechma

mochsdb

mochsdb hat kostenlosen Webspace.

19:48, 1.5.2015

Ich hab ein Grundgerüst geschrieben. Bilder und Links fehlen natürlich noch.

<div class="onTopBar">
  <ul>
     <li><a href="#"><img src="Bilder/ChatIcon.png" height="40"> Chat</a></li>
     <li><a href="#"><img src="Bilder/BriefIcon.png" height="40"> Kontakt</a></li>
     <li><a href="#"><img src="Bilder/UserIcon.png" height="40"> TeraArts</a></li>
  </ul>
</div>
<style>
  .onTopBar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: #2c2c2c;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  img {vertical-align: middle;}
  
  a {
    display: inline-block;
    text-decoration: none;
    font-family: 'Myriad Hebrew';
    /* font-size: 33px; */
    color: #cdcdcd;
  }
  .onTopBar ul li:nth-child(-n+2) {margin-right: 2mm;}
  
  .onTopBar ul li {
    float: left;
    list-style-type: none;
  }
</style>

~~g****e~~

0:04, 2.5.2015
Vertikal zentrieren? Meinst du sowas: https://jsfiddle.net/Lxcqv4LL/
Ich hab alle Kästen zentriert, auf 3 verschiedene Art und Weisen, alle jeweils horizontal und vertikal, damit du für beides eine Antwort hast.

Ich hoffe das hilft.

Liebe Grüße

Beitrag zuletzt geändert: 2.5.2015 0:05:01 von ggamee
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city