Wyśrodkowanie diva z tekstem w innym divie

pytanie zadane 16 października 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)

Witam, mam pewien problem, mianowicie nie wiem jak wyśrodkować diva, w którym znajduje się tekst.

Div ten jest w jeszcze innym divie.

Wygląda to tak:

Chciałbym wyśrodkować tekst "Dowloand<br>Client 1,2 GB" tak aby był na środku zielonego elementu.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Neria.pl Prywatny serwer metin2.</title>
	<meta name="description" content="Neria.pl Rozpocznij przygodę już dziś. Neria to najlepszy prywatny serwer metin2 w Polsce!">
	<meta name="keywords" content="metin2, neria, neria.pl, rpg, mmo, najlepszy, prywatny, serwer, metin2, w, Polsce,">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div id="wrapper">
		<div id="justify">
			<div id="menu">
					<div id="rectangle-menu-1"><span class="tekst">Home</span></div>
					<div class="rectangle-menu-2"><span class="tekst">Forum</span></div>
					<div class="rectangle-menu-2"><span class="tekst">Register</span></div>
					<div class="rectangle-menu-2"><span class="tekst"> Support</span></div> 
					<div class="rectangle-menu-3"><span class="tekst">ItemShop</span></div>
					<div class="rectangle-menu-4"><span class="tekst"> Rankings</span></div>
					<div class="rectangle-menu-4"><span class="tekst"> Contacts</span></div>
					<div id="rectangle-menu-5"><span class="tekst">Events</span></div>
			</div>
		</div>
	</div>
</body>
</html>

body{
	font-family: 'Caudex', serif;
	padding: 0 !important;
	margin: 0 !important;
}

#wrapper{
	background-image: url(img/background.jpg);
	display: block;
	width: 1920px;
	height: 1189px;
}

#menu{
	background-image: url(img/menu.png);
	display: flex;
	width: 1063px;
	height: 84px;
	line-height: 42px;
	font-weight: 700;
	font-size: 14px;
	text-align: center
}

.tekst{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
}

#justify{
	display: flex;
	justify-content: center;
}

#rectangle-menu-1{
	display: block;
	width: 70px;
	height: 46px;
	margin-left: 87px;
	text-align: center;
	float: left;
}

.rectangle-menu-2{
	display: block;
	width: 93px;
	height: 46px;
	text-align: center;
	float: left;
}

.rectangle-menu-3{
	margin-left: 197px;
	display: block;
	width: 86px;
	height: 46px;
	text-align: center;
	float: left;
}

.rectangle-menu-4{
	margin-left: 1px;
	display: block;
	width: 93px;
	height: 46px;
	text-align: center;
	float: left;
}

#rectangle-menu-5{
	margin-left: 1px;
	display: block;
	width: 70px;
	height: 46px;
	text-align: center;
	float: left;
}

Prosił bym też o pomoc w wyłapaniu jakichś błędów, jestem jeszcze początkujący, także pewne rzeczy można było by zrobić w prostszy i szybszy sposób ;-)

Pokaż 12 poprzednich komentarzy

1	komentarz 19 października 2016 przez Pietrak Pasjonat (18,850 p.) li a span { color:red }

komentarz 19 października 2016 przez pablop76 VIP (123,180 p.)
edycja 19 października 2016 przez pablop76

<li><a href="#"><span id="tekst">Download </span><span id="tekst2">Client 1,2 GB</span></a></li>

więc:

#tekst
{
color: red;
}
#tekst2
{
color: blue;
}

Ale nie wiem po co span ma id. Może wystarczy class. Jężeli id potrzebne do np: js to dodaj jeszcze class i ostylizuj wtedy clase.

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) Ustawiłeś dając position: absolute; tekst względem body. Mam nadzieje, że masz tego świadomość.

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) Powyżej jest menu na divach a chyba zmieniłeś już to

komentarz 21 października 2016 przez Avenue Użytkownik (940 p.)

#tekst{

color: #fff;

}

Powyższy zapis nie działa, jak i również

ul li a #tekst{

color: #fff;

}

@pablop76 nie bardzo rozumiem co masz na myśli i chodziło mi o kod w powyższym komentarzu a nie na samej górze, tutaj dam cały.

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Neria.pl Prywatny serwer metin2.</title>
	<meta name="description" content="Neria.pl Rozpocznij przygodę już dziś. Neria to najlepszy prywatny serwer metin2 w Polsce!">
	<meta name="keywords" content="metin2, neria, neria.pl, rpg, mmo, najlepszy, prywatny, serwer, metin2, w, Polsce,">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div id="wrapper">
		<nav>
			<ul>
				<li><a href="#" id="menu-item-1">Home</a></li>
				<li ><a href="#" id="menu-item-2">Forum</a></li>
				<li><a href="#" id="menu-item-3">Register</a></li>
				<li><a href="#" id="menu-item-4">Support</a></li>

				<li><a href="#" id="menu-item-5"><span id="tekst">Download </span><span id="tekst2">Client 1,2 GB</span></a></li>

				<li><a href="#" id="menu-item-6">ItemShop</a></li>
				<li><a href="#" id="menu-item-7">Rankings</a></li>
				<li><a href="#" id="menu-item-8">Contact</a></li>
				<li><a href="#" id="menu-item-9">Events</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

CSS:

body{
	font-family: 'Caudex', serif;
	padding: 0;
	margin: 0;
}

#wrapper{
	background-image: url(img/background.jpg);
	display: block;
	width: 1920px;
	height: 1189px;

}

nav{
	background-image: url(img/menu.png);
	width: 1063px;
	height: 84px;
	margin-left: auto;
	margin-right: auto;
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a{
	display: block;
	background-image: -webkit-gradient(linear,
				left top, left bottom,
				from(#c2b59b),
				to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	width: 1063px;
	padding: 5px;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0px 0 4px rgba(0,0,0,0.55);
}

a:hover{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#cfbf9e),
		to(#9a8d74));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

ul li a{
	display: block;
	width: 100px;
	float: left;
	line-height: 32px;
	font-size: 11px;
	font-weight: 700;
}

#menu-item-1{
	position: absolute;
	left: 530px;
}

#menu-item-2{
	position: absolute;
	left: 605px;
}

#menu-item-3{
	position: absolute;
	left: 695px;
}

#menu-item-4{
	position: absolute;
	left: 788px;
}

#menu-item-5{
	position: absolute;
	left: 925px;
	top: 3px;
	line-height: 12px;
}

#menu-item-6{
	position: absolute;
	left: 1070px;
}

#menu-item-7{
	position: absolute;
	left: 1161px;
}

#menu-item-8{
	position: absolute;
	left: 1257px;
}

#menu-item-9{
	position: absolute;
	left: 1343px;
}

ul li a #tekst{
	color: #a9af79;
}

5 odpowiedzi

odpowiedź 16 października 2016 przez dewe Gaduła (4,300 p.)

odpowiedź 16 października 2016 przez Kamil Naja Nałogowiec (27,410 p.)

odpowiedź 17 października 2016 przez Avenue Użytkownik (940 p.)
edycja 17 października 2016 przez Avenue

Dzięki, już ogarnąłem, lecz mam kolejny problem.

Pełny rozmiar --> http://i.imgur.com/pakSmBk.png

Chodzi o to, że umieściłem "Download" i "Client 1,2 GB" w dwóch osobnych divach, "Download" jest obok divu z napisem Support, więc ma float: left a div z napisem "Client 1,2 GB" ma clear: both.

Problem polega na tym, że div z napisem "Client 1,2 GB" nie jest bezpośrednio pod divem z napisem "Download".

Wyżej znajduje się cały kod, a poniżej kod odpowiedzialny za te dwa divy (biały bg tylko roboczo)

HTML: (zaraz pod ..-menu-5)

<div id="rectangle-menu-6"><span id="tekst2">Dowloand</span></div>
<div id="rectangle-menu-7"><span id="tekst3">Client 1,2GB</span></div>

CSS:

#rectangle-menu-6{
	display: block;
	float: left;
	width: 191px;
	height: 23px;


	background-color: white;
	opacity: 0.5;

}

#rectangle-menu-7{
	display: block;
	clear: both;

	width: 191px;
	height: 23px;
	margin: 0;
	margin-left: 437px;

	
	background-color: white;
	opacity: 0.5;

}

1	komentarz 17 października 2016 przez Czort Nałogowiec (32,500 p.) Zamiast <div> użyj <p> i odpowiednio ostyluj w css.

1	komentarz 19 października 2016 przez HaKIM Szeryf (87,590 p.) Zakładam, że strona nie jest responsywna, więc pierdzielnij to za pomocą postition: absolute; i po problemie.