Problems aligning the banner in the center

Asked

Viewed 54 times

-1

I’m working with Parallax and I’m not getting the img src of div header lined up in the middle, I don’t know what’s going on. I’ve tried to touch the margin, but nothing happens. Someone can help out?

body {
	font-family: Tahoma;

}



.container{
	max-width: 960px;
	margin: 0 auto;
	background:#303
	font-size: 24px; 
	padding: 25px;	
	
}

.parallax {
	background:url(../imgs/background.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	height: 350px;
	
}

#div.header{
	width: 800px;
	height: 140px;
	background:#F3E8BE;
	margin:0px auto;
}


div#header h1{
	margin-top: 30px;
	display: block;
	float: left;	
    	
}

ul#nav{
	list-style-type: none;
	padding-left: 0px;
	display: block;
	float: left;
	margin-left: 130px;
}

ul#nav li{
	float:left;
	margin-left: 50px;
	
	
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="_css/estilo.css"/>

</head>

<body>
<div id="header">
<h1><img src="imgs/banner.png"/></h1>

<ul id="nav">
<li>Inicio</li>
<li>Gamemode</li>
<li>Fórum</li>
<li>Sobre</li>
<li>BPE e BPF</li>
<li>Sistema de troca de dinheiro</li>
</ul>


</div>



<div class="container">
 
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<div class="parallax">













</div>



</div>
</body>
</html>

html css

  • Because you’re putting an image inside a h1? This tag should be used for titles.

  • I am following a lesson as a basis to learn Parallax and it used on H1. Which tag should I use?

  • It is. It seems to me semantically incorrect, but... If you want to center the image, just put text-align: center; in that h1.

  • Another thing: the h1 already is display: block by default, so you don’t need to put this in CSS. Instead of H1, you could use a div yourself.

  • It’s not going.... This lorem ipsum seems to be keeping my banner from getting centered.

  • Opa...I put as div and he gave a better lined up now ein, but not centralized yet. Lorem ipsum is a little overflowing now, but the banner and menu were in the position I wanted, one respecting the other.

  • Takes the float: left

  • our! thank you very much!!!!!!!

Show 3 more comments

1 answer

0

Put this H1 with the banner inside a Vid, after an id for it, in the css of that div you created. da um display: flex; aling-items: center;

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.