I have some simple css that is meant to display a paragraph element in the middle(vertically) of its parents div.
My Problem: The paragraph element does't vertically align to the middle it always sits at the top. This solution only has to work on Safari(iPad's Safari version specifically).
Do you know how to get my paragraph element to vertically align to the middle?
<html>
<head>
<style type="text/css">
<!--
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
}
.buttonBoxContainer {
cursor: pointer;
}
-->
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
If your box will always have a static height, you can use line-height to center the paragraph element, as shown here.
If it won't be static, the best solution (In my experience) is to use javascript.
<html>
<head>
<style>
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
color: #fff;
}
.buttonBoxContainer {
cursor: pointer;
line-height: 200px;
}
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
Related
I have tried searching for answers but nothing worked. I am trying to align a paragraph. I am pretty sure nothing is overwriting code in CSS. Here is the HTML and CSS:
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main {
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow: auto;
height: 100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
<body id="top">
<div id="main">
<p id="center">
<h1> TEST </h1>
</p>
</div>
</body>
What is the mistake here?
text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).
p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.
Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:
<div id="main">
<p id="center"> </p>
<h1> TEST </h1>
</div>
One last thing, because you said that you're a beginner in frontend matters:
Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/
For the text-align: center to work you have to pass also the margin: auto option.
Your HTML is invalid. A <p> can't contain a <h1>. Most browsers will attempt to correct the mistake by closing the paragraph before the heading, and then creating another paragraph after it.
You can remove either the heading or the paragraph and use CSS to style as needed.
jsFiddle example
Give text-align: center to #main h1, like:
#main h1 {
text-align: center;
}
Although you've used <h1> inside of <p>, which is an invalid HTML, and your browser handle it by closing the <p></p> before starting <h1>.
Have a look at the snippet below:
#main h1 {
text-align: center;
}
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main{
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow:auto;
height:100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
<html>
<head>
<title>HTML PAMOKOS</title>
<link rel="stylesheet" href="../assets/css/html.css" />
</head>
<body id="top">
<div id="main">
<p id="center"></p>
<h1> TEST </h1>
</div>
</body>
</html>
Hope this helps!
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main{
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow:auto;
height:100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
h1{
text-align: center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>HTML PAMOKOS</title>
<link rel="stylesheet" href="../assets/css/html.css" />
</head>
<body id="top">
<div id="main">
<p id="center"> <h1> TEST </h1> </p>
</div>
</body>
</html>
I am trying myself a bit on Website layout.
So I have started designing a page.
I want my start page to be divided with a horizontal division line.
So far, so good.
Now each of the two fields needs some text and I want the text to have a vertical align: bottom.
My research on the internet got me the result that there is no real possibility to do like that for <div> tags. But there is one for a table cell.
My HTML code looks like that:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link href="firstPage.css" rel="stylesheet" type="text/css">
</head>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<body>
</body>
</html>
and my CSS class looks like that:
#charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
background: #F3A008;
}
.half:last-child {
background: #950049;
}
.titletext{
text-align:center;
display: table-cell;
vertical-align: bottom;
}
I have found that site as a useful solution,
but it does not work for me....
http://phrogz.net/css/vertical-align/
What am I doing for a mistake?
Change this class in your CSS:
.titletext{
text-align: center;
display: table-cell;
position: absolute;
bottom: 0;
}
I have a simple HTML page in which i want to align Div vertically middle of another div. There is one way of using positioning concept. But i want to use vertical-align property.
Below is my html and css files.
What i am trying to do is to place <div class='plink'> vertically centered which is inside of
<div class='tiles'>
.plink{
height: 100%;
vertical-align: middle;
}
is also not working
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.icon" type="image/jpeg">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Some title</title>
</head>
<body>
<main>
<h1>Some heading</h1>
<hr>
<div id="tilescontainer">
<div class="tiles" id="tile_1">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_2">
<div class="plink">some text</div>
</div>
<br>
<div class="tiles" id="tile_3">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_4">
<div class="plink">some text</div>
</div>
</div>
</main>
</body>
</html>
style.css
/*Main style sheet*/
main{
height: 600px;text-align: center;
}
a{
text-decoration: none;
}
/*tilescontainer*/
#tilescontainer{
text-align: center;position: relative;top: 10%;
}
/*tilescontainer*/
/*tiles*/
.tiles{
display: inline-block;height: 200px;width: 200px;box-shadow: 2px 2px 2px #808080;margin: 5px;text-align: center;vertical-align: middle;
}
/*tile_1*/
#tile_1{
background-color: #ff8000;
}
#tile_1:hover{
background-color: #808080;
}
/*tile_1*/
/**/
#tile_2{
background-color: #00aced;
}
#tile_2:hover{
background-color: #808080;
}
/**/
/**/
#tile_3{
background-color: #82858a;
}
#tile_3:hover{
background-color: #808080;
}
/**/
#tile_4{
background-color: ;
}
#tile_4:hover{
background-color: #808080;
}
span{
border: 2px solid;
}
/*tiles*/
Here at w3schools example is give i tried this link
Have you tried working with the table display modes?
When I am doing css styling I find vertical alignment to work well with these technique.
Example:
.title{
display: table;
}
.plink{
display:table-cell;
height: 100%;
vertical-align: middle;
}
I think what you want to do with the vertical-align property is not what it was designed to do and therefor not possible. This article explains why:
Vertical Alignment
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
Hey beginner coder here:
I'm trying to achieve this: http://i.imgur.com/aVawhET.png with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 5</title>
<style>
body{
margin-top: 25px;
margin-left: 15px;
width: 100%;
height: 100%;
}
#text{
width: 90%;
display: inline-block;
}
#text p{
word-break: break-all;
}
#image{
height: 500px;
width: 5%;
display: inline-block;
background-image: url("bakgrund.jpg");
background-repeat: repeat-y;
}
</style>
<div id="container">
<div id="text">
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
</div>
<div id="image">
</div>
</div>
but I fail and get this result: http://imgur.com/ac0nSqz what am I doing wrong? I've tried things like adding minus margin values. Why is it jumping down?
The correct answer is:
#text,
#image { vertical-align: top; }
The reason is because inline-block elements are, by default, aligned by their baselines - so the bottom of both div's are in line with each other - meaning that their will be a space at the top of the shorter div when it's placed in line with a taller div to make the bottoms of these divs line up.
CSS
body{
margin-top: 25px; ///Remove this
}
Add margin-top: 0 in body tag