CODEWITHSUNDEEP
htmlcsspositioning
Luke Bray
Luke Bray

Reputation: 245

I want to have one div centered inside another with another div centered below that.

Here is my CSS and html:

.container {
	background-image: url('./images/bg.jpg');
	height: 500px;
	width: 960px;
	margin: auto;
}

.logo {
	margin: auto;
	text-align: center;
	width: 960px;
	height: 100px;
	position: relative;
	top: 200px;
}

ul {
	list-style: none;
}

li {
	display: inline;
}

.nav {
	margin: auto;
	text-align: center;
	padding-right: 35px;
	clear: both;
}
<div class="container">
	<div class="logo">
		<h1>My Page</h1>
	</div>
	
	<div class="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

I don't think they way I've positioned the <div class="logo"></div> is probably correct but I'm not sure how to centre content within a div and any solution I find seems to affect the positioning of <div class="nav"></div>.

So this question is two-fold - how can I position <div class="logo"></div> centrally within <div class="container"></div> and then how can I place <div class="nav"></div> below <div class="logo"></div>?

Thanks for any help.

Upvotes: 0

Views: 35

Answers (3)

Qiong
Qiong

Reputation: 61

.container {
    background-image: url('./images/bg.jpg');
    height: 500px;
    width: 960px;
    margin: auto;
}

.logo {
    margin: auto;
    text-align: center;
    width: 960px;
    height: 100px;
    position: absolute;
    top: 40%;
    dispaly: block;
}

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

li {
    display: inline;
}



<div class="container">
    <div class="logo">
        <h1>My Page</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>

Is this what you want?

Upvotes: 0

c-bro
c-bro

Reputation: 486

If you want to relatively position both divs, an easy way to center a relatively positioned item inside its parent container is using left: 50%, transform: translateX(-50%).

.container {
	background-image: url('./images/bg.jpg');
	height: 500px;
	width: 960px;
	margin: auto;
}

.logo {
	margin: auto;
	text-align: center;
	width: 960px;
	height: 100px;
	position: relative;
    left: 50%;
    transform: translateX(-50%);
}

ul {
	list-style: none;
}

li {
	display: inline;
}

.nav {
	margin: auto;
    position: relative;
	text-align: center;
	padding-right: 35px;
	clear: both;
    left: 50%;
    transform: translateX(-50%);
}
<div class="container">
	<div class="logo">
		<h1>My Page</h1>
	</div>
	
	<div class="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

Upvotes: 0

pol
pol

Reputation: 2701

You can use flexbox to do that.
https://jsfiddle.net/bjdvz1km/

.container {
	background-image: url('./images/bg.jpg');
	height: 500px;
	width: 960px;
  text-align: center;
  margin: auto;
  
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.logo {
	margin: auto;
	width: 960px;
	height: 100px;
}

ul {
	list-style: none;
}

li {
	display: inline;
}

.nav {
	margin: auto;
	padding-right: 35px;
	clear: both;
}

body {
  margin: 0;
}
<div class="container">
  
  <div class="logo">
    <h1>My Page</h1>
  </div>
  
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</div>

Upvotes: 1

Related Questions