I made a div with a
class="text-content"
and then in CSS set
.text-content{
width:60%
and the text inside the div is getting aligned to the left. It is taking up 60% of body, but it's aligned left, not center. Why is this? Nothing else but the class is effecting the div. Putting text-align: center; doesn't do anything in CSS.
Here's all of the code if you need more context:
You haven't done anything to centre it, so it won't be centred.
In order to centre a block level element, you should give it left and right margins of auto like so:
.text-content {
width: 60%;
margin-left: auto;
margin-right: auto;
}
…or shorthand works just as well:
.text-content {
width: 60%;
margin: 1em auto;
}
That's the expected behaviour for a div display: block;
You can do two things:
1) Add a margin-left: 20%; (so it's 20% space on the left, 60% layer, 20% space on the right).
2) Change the elements to display: inline-block; and add: text-align: center; to your body.
body { text-align: center; }
.header, #up, .text-content {
display: inline-block;
text-align: left;
}
I have showcased the latter option on the following code:
img.properties{
top: 0;
max-width: 130px;
height: auto;
padding: 0;
margin-right: 10px;
margin-left: 0px;
margin-bottom: 10px;
}
body, html{
height: 100%;
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
.header, #up, .text-content {
display: inline-block;
text-align: left;
}
.logo{
float: left;
margin: 0;
padding: 0;
}
.header{
background: black;
width: 100%;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
}
.container{
width: 60%;
margin: 0 auto;
}
a {
text-decoration: none;
color: white;
font-family: 'Oswald';
font-size: 25px;
}
ul{
color: white;
}
li {
list-style: none;
float: right;
margin: 15px;
padding-top: 14px;
font-size: 25px;
font-family: 'Oswald';
}
#up{
margin-top: 120px;
width: 60%;
}
.text-content{
width: 60%;
}
.parallax {
/* The image used */
background: url('parallax1.jpg');
/* Full height */
height: 300px;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-device-width:1024px) {
.parallax{
background-attachment: scroll;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>AS/SO -- Home</title>
<meta charset="utf-8">
<meta name="description" content="A graphic design studio based in Croatia.">
<meta name="tags" content="graphic, studio, design, typography, retro, croatia">
<meta name="robots" content="index, nofollow">
<link rel="stylesheet" type="text/css" href="styling.css">
<link rel="icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
</head>
<body> <!-- subject of page - the header-->
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html"><img class="properties" src="header.jpg"></a>
</div>
<div class="navbar">
<ul>
<li class="navbaritems"><a href="contact.html">contact</a></li>
<li class="navbaritems"><a href=portofolio.html>portofolio</a></li>
<li class="navbaritems"><a href=index.html>home</a></li>
</ul>
</div>
</div>
</div>
<div id="up">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam sed turpis non aliquam. Praesent id egestas magna. Fusce tincidunt rhoncus tortor, vitae pharetra diam mollis mattis. Vivamus tempor, libero sit amet aliquam convallis, massa ex euismod ante, ut sollicitudin arcu purus sed ipsum. Pellentesque odio dolor, vulputate eu eros ac, semper egestas orci. Mauris sit amet ultricies justo, at posuere diam. Duis id consequat eros. Aliquam consectetur bibendum erat, convallis rutrum mauris luctus nec.</p>
<p>Vestibulum enim lectus, pulvinar pellentesque pulvinar sed, dapibus ut leo. Nulla nec mi consequat, dapibus augue egestas, convallis ante. Phasellus rhoncus enim eros, sit amet venenatis mauris luctus quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare odio dolor, fringilla porta magna tristique vel. Nullam egestas sed ex in vehicula. Aliquam sed maximus ipsum, a gravida enim. Sed imperdiet tempus gravida. Vestibulum porttitor odio id neque gravida, vitae tincidunt risus bibendum. Fusce placerat turpis sit amet massa fringilla, non convallis magna gravida. Pellentesque vitae velit volutpat orci luctus lobortis.</p>
<p>Donec ultrices orci lectus, in tempus libero pulvinar vitae. Nullam rhoncus ut mi accumsan tempus. Vestibulum purus risus, ultrices nec sodales eu, iaculis a velit. Suspendisse consequat feugiat fermentum. Suspendisse velit eros, aliquam sit amet auctor eget, cursus ac risus. Phasellus eu tristique dolor. Sed sapien libero, varius non pulvinar in, congue at mi. Aenean quis lobortis turpis. Cras cursus id lacus a tempus. Vivamus ac felis a leo sodales aliquet consectetur at lacus. Duis sagittis rutrum ultrices. Aenean et facilisis augue.</p>
</div>
<div class="parallax"></div>
<div class="text-content">
<p>Vestibulum nec nisl sem. Proin in arcu ultricies, volutpat enim sit amet, faucibus leo. Nunc cursus eget ligula et consectetur. Suspendisse sed justo nisl. Nulla consequat nisl eget leo porta pharetra. Etiam iaculis libero at est ornare pulvinar. Nam commodo turpis velit, non egestas arcu maximus vitae. Aenean congue nisl vitae arcu eleifend, nec gravida lacus maximus. Mauris ac tellus est. Duis facilisis leo ligula, eu ornare est congue ut. Nunc rhoncus enim nec tortor accumsan, eu gravida nunc malesuada. Fusce risus purus, vehicula ut pretium vitae, pretium in odio. Duis leo magna, porta ac lacinia vel, tempus at sem. Fusce nisl felis, dictum in nunc nec, rhoncus pellentesque libero. Maecenas velit nisl, egestas in iaculis a, sodales vel ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam sed turpis non aliquam. Praesent id egestas magna. Fusce tincidunt rhoncus tortor, vitae pharetra diam mollis mattis. Vivamus tempor, libero sit amet aliquam convallis, massa ex euismod ante, ut sollicitudin arcu purus sed ipsum. Pellentesque odio dolor, vulputate eu eros ac, semper egestas orci. Mauris sit amet ultricies justo, at posuere diam. Duis id consequat eros. Aliquam consectetur bibendum erat, convallis rutrum mauris luctus nec.</p>
<p>Vestibulum enim lectus, pulvinar pellentesque pulvinar sed, dapibus ut leo. Nulla nec mi consequat, dapibus augue egestas, convallis ante. Phasellus rhoncus enim eros, sit amet venenatis mauris luctus quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare odio dolor, fringilla porta magna tristique vel. Nullam egestas sed ex in vehicula. Aliquam sed maximus ipsum, a gravida enim. Sed imperdiet tempus gravida. Vestibulum porttitor odio id neque gravida, vitae tincidunt risus bibendum. Fusce placerat turpis sit amet massa fringilla, non convallis magna gravida. Pellentesque vitae velit volutpat orci luctus lobortis.</p>
<p>Donec ultrices orci lectus, in tempus libero pulvinar vitae. Nullam rhoncus ut mi accumsan tempus. Vestibulum purus risus, ultrices nec sodales eu, iaculis a velit. Suspendisse consequat feugiat fermentum. Suspendisse velit eros, aliquam sit amet auctor eget, cursus ac risus. Phasellus eu tristique dolor. Sed sapien libero, varius non pulvinar in, congue at mi. Aenean quis lobortis turpis. Cras cursus id lacus a tempus. Vivamus ac felis a leo sodales aliquet consectetur at lacus. Duis sagittis rutrum ultrices. Aenean et facilisis augue.</p>
<p>Vestibulum nec nisl sem. Proin in arcu ultricies, volutpat enim sit amet, faucibus leo. Nunc cursus eget ligula et consectetur. Suspendisse sed justo nisl. Nulla consequat nisl eget leo porta pharetra. Etiam iaculis libero at est ornare pulvinar. Nam commodo turpis velit, non egestas arcu maximus vitae. Aenean congue nisl vitae arcu eleifend, nec gravida lacus maximus. Mauris ac tellus est. Duis facilisis leo ligula, eu ornare est congue ut. Nunc rhoncus enim nec tortor accumsan, eu gravida nunc malesuada. Fusce risus purus, vehicula ut pretium vitae, pretium in odio. Duis leo magna, porta ac lacinia vel, tempus at sem. Fusce nisl felis, dictum in nunc nec, rhoncus pellentesque libero. Maecenas velit nisl, egestas in iaculis a, sodales vel ipsum.</p>
</div>
</body>
</html>
Add margin: 120px auto 0; to the divs.
.text-content {
margin: 120px auto 0;
width: 60%;
}
try adding this to your code from css file from the top of it
*{
margin:0px;
padding:0px;
}
this code fill set margin and padding to 0 then you can now create your own divisions
