+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: wyśrodkowanie obiektów w <div><ul><li><a> (/thread-wy%C5%9Brodkowanie-obiektow-w-div-ul-li-a)
wyśrodkowanie obiektów w <div><ul><li><a> - [email protected] - 30-12-2012
Mam problem z menu. Menu jest utworzone przy pomocy <ul><li>...
Chodzi mi o to, jak wyśrodkować tekst w pojedynczym prostokącie(linku) pionowo. vertical-align: middle, nie działa mi. Możecie mi coś poradzić? Mam zamiar jeszcze do pojedynczego linku wstawić plik graficzny o wielkości 74px, ale wysokość to sobie sam ustawię, i sam wstawię grafikę. Tylko właśnie problem z tym jak to wyśrodkować pionowo? Może próbuje umieścić vertical-align nie w tym miejscu co potrzeba, ale wątpię w to(pod text-align). Może wstawię kod źródłowy, index.php, arkusz.css, i menu.php.
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL" xml:lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
</head>
<body>
<div id="naglowek"><?php include "naglowek.php"; ?></div>
<div>
<?php include "menu.php"; ?>
</div>
<div id="tresc" float="right" align="center">
<?php
// zmienna $go przekazana metoda GET
$go = $_GET['go'];
// sprawdzamy czy zmienna $go nie jest pusta
if(!empty($go))
{
// sprawdzamy czy plik o danej nazwie istnieje
if(is_file("$go.php")) include "$go.php";
// jezeli plik nie istnieje wyswietla się komunikat
else echo "Nie ma takiej strony.";
}
// jezeli zmienna $go jest pusta wyswietla się strona glowna
else include "start.php";
?>
</div>
</body>
</html>
arkusz.css
a.link{
color: #FF2400;
}
div#tresc{
margin: 50px 50px 50px 250px;
}
a.reklamy{
font-size: larger;
text-decoration: none;
}
a#mniejsze{
font-size: smaller;
text-decoration:none;
color: #FF2400;
}
div#naglowek{
text-align: center;
vertical-align: middle;
background-image: url('carbon005.jpg');
}
div#menu{
float: left;
width: 200px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
margin: 0 0 2px 0;
}
#menu ul li a {
display: block;
margin: 0px;
padding: 0 20px 0 0;
font: bold 12px/25px Arial, sans-serif;
text-decoration: none;
height: 40px;
color: White;
text-align: right;
background: #6A5ACD;
}
#menu ul li a:hover {
text-decoration: none;
color: #D07300;
background: #F1D67A;
}
i plik menu.php
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
<div id="menu">
<ul>
<li><a href="index.php?go=link1">O firmie</a></li>
<li><a href="index.php?go=link2">Reklama na pojazdach</a></li>
<li><a href="index.php?go=link3">Banery reklamowe</a></li>
<li><a href="index.php?go=link4">Druk wielkoformatowy</a></li>
<li><a href="index.php?go=link5">Grafika podłogowa</a></li>
<li><a href="index.php?go=link6">Naklejki</a></li>
<li><a href="index.php?go=link7">Podkładki pod piwo</a></li>
<li><a href="index.php?go=link8">Druk offsetowy</a></li>
<li><a href="index.php?go=link9">Artykuły poligraficzne</a></li>
<li><a href="index.php?go=link10">Systemy wystawiennicze</a></li>
<li><a href="index.php?go=link11">Kontakt</a></li>
<li><a href="index.php?go=link12">Promocje & Cenniki</a></li>
</ul>
</div>
RE: wyśrodkowanie obiektów w <div><ul><li><a> - atp - 31-12-2012
Kod:
#menu ul li {display:table-cell; vertical-align:middle;}Powinno śmigać. Nie zadziała w starszych wersjach IE.
RE: wyśrodkowanie obiektów w <div><ul><li><a> - Kartofelek - 31-12-2012
Bo nie rozumiesz działania vertical align. Vertical align dla:
a) komórek (table cell) wyrównuje ich zawartość w pionise
b) dla innych elementów wyrównuje JE w pionie względem siebie
Jeżeli w danych elemencie masz np spana który ma display:inline-block; width:0; height:100%; to jego bracia którzy będą mieli vertical-align wyrównają się w pionie do niego
Mówisz że chcesz wstawić w ten link jeszcze obrazek. To właśnie centruj względem niego, bo jest wyższy.Możesz też skorzystać z line-height lub zwyczajnego padding-top (dla grafiki w linku wykorzystaj wtedy albo position:relative, top:-....px; albo translateY(-....px))
RE: wyśrodkowanie obiektów w <div><ul><li><a> - macder - 01-01-2013
Z paddingiem może to być kłopotliwe.
Najłatwiej jest uzyskać efekt wycentrowania w pionie korzystając ze wspomnianego już line-height. Jeżeli wysokość li masz 20px, ustawisz line-height na 20px, to zawartość bęzdie na środku.
RE: wyśrodkowanie obiektów w <div><ul><li><a> - atp - 01-01-2013
(01-01-2013, 21:09)macder napisał(a): Z paddingiem może to być kłopotliwe.
Najłatwiej jest uzyskać efekt wycentrowania w pionie korzystając ze wspomnianego już line-height. Jeżeli wysokość li masz 20px, ustawisz line-height na 20px, to zawartość bęzdie na środku.
Średnio elastyczne rozwiązanie np. w przypadku kilku linii tekstu w obrębie jednego li ...
RE: wyśrodkowanie obiektów w <div><ul><li><a> - macder - 02-01-2013
Każde rozwiązanie zależy od tego gdzie ma być zastosowane trzeba je odpowiednio dostosować.