For some reason, my text just wont get centrally aligned. It is a little to the left. Even when I do text-align: right, it does not go to the place where it should. Here's my HTML file:
<html>
<head>
<title>foo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.png" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="icon" type="image/gif" href="images/favicon.png" />
</head>
<body>
<div id="strapwrap">
<div id="strap">
<div id="menu"><span id="sub">Home</span> <span id="sub">Plans</span><span id="sub">FAQ</span></div>
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div><div id="container">
<div id="login_thingy">
//all the login form, and some content goes here, unfortunately, it does not get centrally aligned.
</div>
</div>
Here's my style.css
body{
margin: 0;
background-image: url('http://athile.net/library/blog/wp-content/uploads/2011/11/grass02-300x300.png');
}
#strapwrap{
background-color: #000000;
color: white;
width: 100%;
height: 75px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
a{
color: inherit;
text-decoration: inherit;
}
#strap{
width: 80%;
margin: auto;
margin-top: 0;
margin-bottom: 0;
}
#menu{
font-size: 25px;
height: 75px;
float: right;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
word-spacing: 25px;
}
#sub:hover{
border-bottom: 1px dotted #ffffff;
}
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Wrap your div text inside <p>
<div id="login_thingy">
<p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p>
</div>
Side Note: It's a good practice to not to place direct text content inside the div
Fiddle
Demo Fiddle
Change your CSS to add/alter:
#container{
text-align:center; /* new addition */
}
#login_thingy {
width: 80%;
display:inline-block; /* replace margin auto */
margin-top: 15px;
font-size: 35px;
padding: 15px;
}
All you need is to set text-align:center on the parent element (#container) then display:inline-block; on the child (#login_thingy). You can then remove any use of margin:auto
use
#container{
text-align:center
}
DEMO
Apply fixed width to the contents of login_thingy div and add margin-left:auto;margin-right:auto; to the contents of login_thingy div.
Like
<div id="login_thingy">
<div style="width:50%;margin-left:auto;margin-right:auto;">all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</div>
</div>
First of all HTML comments are like this: <!-- TEXT HERE -->
Second of all you code is wrong. In the CSS part you have type this:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Without a semicolon (;) at the end of text-align: center; which may be the reason you are getting this error. So the correct code is:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center;
}
If that doesn't work, just use a normal header and put it inside a div if you wish. Like so:
<h2 id="login_thingy"> TEXT HERE </h2>
Hope this helped.
Related
This question already has answers here:
margin on h1 element inside a div
(3 answers)
Closed 6 years ago.
I have a problem where my h1 tags gets seperated from the top of my page - like this: enter image description here
I'm still very new to HTML & CSS, so I'm asking for your help. Also, I DID look around to see other posts about this and I've tried ALOT, but i can't seem to get it to work.
Here is my CSS & HTML:
html {
height: 100%;
width: 100%;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.header{
background: url("../images/artboard1.jpg") no-repeat top center fixed;
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
float: left;
padding-left: 40px;
padding-top: 35px;
margin: 0;
}
nav {
float: right;
padding-top: 40px;
padding-right: 40px;
margin: 0;
}
a {
color: #ffffff;
font-weight: 400;
font-size: 80%;
text-decoration: none;
margin: 0 auto;
padding-left: 3rem;
}
.content_top {
margin: 0;
margin-top: 260px;
padding: 4rem 0 8rem 0; }
.sub_title, .under_title {
color: #ffffff;
text-align: center;
}
.sub_title {
font-weight: 400;
font-size: 0.85rem;
padding: 0 0 5px 0;
margin: 0;
}
.logo_middle {
display: block;
margin: 0 auto;
}
.under_title {
font-weight: 400;
font-size: 0.85rem;
padding: 5px 0 5px 0;
margin: 0;
}
.content {
background: url(../images/Untitled-2.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #0D0E12;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.projekter {
background-color: #0D0E12;
margin: 0 auto;
padding 0 auto;
}
<html>
<head>
<title>Jakob Hoeg</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>
<body>
<div class="header">
<header>
<a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
<nav>
HJEM
PORTFOLIO
KONTAKT
</nav>
<div class="content_top">
<h4 class="sub_title">HEY, MIT NAVN ER</h4>
<img class="logo_middle" src="images/logo_big.png" draggable="false"/>
<h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
</div>
</header>
</div>
<section class="content">
<div id="content_cont">
<h1>Hello</h1>
</div>
</section>
<section class="projekter">
<div id="projekter">
<h1>Hello</h1>
</div>
</section>
</body>
</html>
Heh, it's a very interesting effect - "margin collapsing".
h1 has default margin-top.
Parent and first/last child
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block from the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
from the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
To solve this problem add padding-top to container or replace header margin-top with padding-top. Also can set h1 margin-top to 0.
You can read more about it here.
could you add this style. It'll works.
#content_cont h1 { margin-top:0; }
Try not to set width and height for every objects. As other answers say you can move objects using margin in css. But my concern is adding unnecesary styles like width and height 100% for html, body, content and ... bringing some conflict to your design.
To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.
For whatever reason, my vertical-align: bottom; property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?
index.html
<body>
<div class="header">
<div class="container">
<div class="pull-left">
What's This?
</div>
<img src="http://placehold.it/75x75" />
<div class="pull-right">
About
</div>
</div>
</div>
<!-- Modules -->
<!-- Controllers -->
<!-- Services -->
</body>
main.css
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: #FF3B4E;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: white;
text-align: center;
height: 125px;
}
.header img {
margin: 25px 0;
}
.header .pull-left{
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
.header .pull-right {
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
The reason I have boxes around pull-left and pull-right is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!
jsfiddle: https://jsfiddle.net/rtc498uk/
EDIT: My goal is to get the text to align like this:
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}
I've created a nice header for my site but when I try to add content after that such as a simple paragraph it's just getting placed in the same spot under my header container. I've attempted some clear fixes but that did not solve my issue. Thanks for your help in advance!
#back-container {
width: 1214px;
height: 809px;
background-image: url("coffee-beans 2.jpg");
}
#page-container {
width: 900px;
height: 100%;
background-color: rgba(214,214,214, .8);
margin-left: auto;
margin-right: auto;
}
header {
width: auto;
height: 130px;
background-color: D8A071;
border-bottom: 3px solid 864C1B;
position: fixed;
font-family: "Trattatello";
}
#logo {
margin-top: -75px;
}
nav {
float: right;
width: 550px;
padding-top: 40px;
}
nav a {
text-decoration: none;
color: black;
border-radius: 20px;
border: 2px solid black;;
background-color: 864C1B;
padding-top: 15px;
margin-right: 20px;
display: inline-block;
text-align: center;
width: 100px;
height: 45px;
}
<html>
<head>
<title>New Coffee Site</title>
<link rel="stylesheet" type="text/css" href="coffeestyles.css">
</head>
<body>
<div id = "back-container">
<div id = "page-container">
<header>
<img id = "logo" src = "coffelogo1.png">
<nav>
Home
Menu
About us
Something
</nav>
</header>
<article>
<p>
asdfasfasfasfasfasfasfasf
</p>
</article>
</div>
</div>
</body>
</html>
Your header is fixed and so anything after it in the HTML will flow beneath it. Move the <header> to be outside of the .page-container and add margin to the top of the .page-container that is equal to the height of your header. This will push the content down so that it starts at the same point as your header ends.
You also need to add where your header will be with top:0; and width:100%;.
Here is a fiddle showing the changes I mae: http://jsfiddle.net/87c9wduf/
It has to do with the position: fixed. Add margin-top to the element you are using as a container that will move everything down.
I'm working in a project and I have this
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="recursos/css/main.css">
<link rel="stylesheet" type="text/css" href="recursos/css/menu.css">
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="home">Home</p>
</div>
<hr>
</header>
Now I'm working in the menu bar and I want to put the <p> home in the center of the menu div
When I put margin-top: 10px to centre the home button it moves all the menu div
I have this css:
body {
background-image: url('../../img/madera.jpg');
}
.centrado {
height: 100%;
width: 80%;
background-color: red;
margin: 0 auto;
}
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
}
.espacio {
height: 10px;
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
}
What can I do?
Use padding-top on .menu instead of margin-top on .home.
use position relative and absolute concept
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
position:absolute;//it make parent
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
position:relative;// it make child now
}
now if you change css of home its doesn't effect all element
fore more see http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Try this
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<center>
<p class="home">Home</p>
</center>
</div>
<hr>
</header>
add float property float:left;
Try this code:
DEMO
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 15px;
border-radius: 15px;
float:left;
}
If you want to make vertical center then simple adjust the line-height for menu to 50px that make text inside menu vertical-align middle.
.menu {
height: 50px;
line-height:50px;
width: auto;
background-color: blue;
border-radius: 15px;
}
So, while I tried positioning some text on the right of an image, I got this very weird error:
Positioning worked when I used as an article description a few characters.
So, that's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="somelogo.png">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Title - Home</title>
</head>
<body>
<section id="mainContent">
<div class="article_summary">
<span class="article_date_author">2013-11-08 20:31:32 by MY NAME</span>
<span class="article_title">ARTICLE TITLE HERE</span>
<div class="article_clear"></div>
<div class="article_image_container">
<img class="article_image" src="http://i.imgur.com/Nl8SwBp.jpg">
</div>
<div class="article_descr">
<p>
Article Summary
Read more...
</p>
</div>
</div>
</section>
</body>
</html>
main.css:
#import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
* {
font-family: "Ubuntu";
}
.article_summary {
overflow: hidden;
background-color: white;
border-radius: 10px;
margin: 10px;
box-shadow: 2px 2px 10px 1px #777;
}
.article_date_author {
font-size: 0.7em;
float: right;
padding: 10px 10px 0 0;
}
.article_clear {
clear: both;
}
.article_image_container {
position: relative;
float: left;
}
.article_image {
float: left;
padding-top: 10px;
width: auto;
max-height: 300px;
max-width: 100%;
}
.article_descr {
position: relative;
float: left;
}
If I change "Article Summary" to something longer the text will result beneath of the image.
Images:
I came to the realization that this has to do with the fact that it can't stand more than 1 line of text on the right of the image. But why is this happening ?
Text takes all the space it needs. If you want it to stay on the right you need to give the descr div a width
.article_descr {
position: relative;
float: left;
width: 70%;
}
Give your a maximum width so that the image width + the width won't be more than the containers 100%:
.article_descr {
position: relative;
float: left;
max-width: 60%;
}
http://www.liveweave.com/e7uYIh