I have a very simple HTML. Due to some limitations, I cannot modify the HTML content. I want to center the text vertically only using CSS.
<html>
<head>...</head>
<body>
<div>Oops, the webpage is currently not available.</div>
</body>
</html>
Note that the size of the HTML can be variable.
In addition, if the text cannot be displayed in one line, it should be broken into multiple lines.
Is it possible?
I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.
There are some workarounds, see http://phrogz.net/css/vertical-align/index.html
Another possible solution:
<html>
<head>
<title>Title</title>
<style>
body {height:100%}
</style>
</head>
<body>
<div style="height:100%;">
<div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
</div>
</body>
</html>
<html>
<head>...
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.vertical {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="vertical">
Centered
</div>
</body>
</html>
Try this:
.text-tag{
text-align: center;
margin-top: 25%;
}
And apply "text-tag" to the text you want to center.
Related
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}
example
Ι'm trying to align two separate backgrounds in one html page, lets say the first part (in which it will be added a flexslider) and the remaining main-page. How can I exactly align these two backgrounds horizontally? Can you provide me an example? My code doesn't work well.
<style type="text/css">
#one {
background-image: url("http://www.fnordware.com/superpng/pnggrad8rgb.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
#two {
background-image: url("http://www.bit-101.com/blog/wp-content/uploads/2009/05/background.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
</style>
<div id="one"></div>
<div id="two"></div>
Demo
Thanks in advance
How about this?
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<div style="background-image: url(img/3.png);
width:1250px; height:1366px;">
</div>
<div style="background-image: url(img/two.png); width:1250px;
height:1366px;">
</div>
</body>
</html>
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!
Is there a way to make a div appear half off-screen using just CSS without knowing the width of the div?
Unless I've misunderstood the question, I think it is possible with CSS, as I hope should be clear from this jsfiddle.
Example HTML
<div class="container one">
<div class="half">Hello there.</div>
</div>
<div class="container two">
<div class="half">Hello there, you old dog.</div>
</div>
<div class="container three">
<div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>
The CSS
.container {
position: absolute;
}
.half {
position: relative;
right: 50%;
}
.two {
top: 30px;
}
.three {
top: 60px;
}
Actually, no.
The div will have it's top positioned at 50% the screen... you could assume values that would "sort of" make it look like it would be in the middle if you knew more or less the height of the div before-hand. But in short, no.
Only with tables or Javascript.
i made something from jQuery. Hope its what you are after - http://jsfiddle.net/6Guc8/1/. it gets half the width of the element and then chucks half of it out the screen.
here is the jquery
$(document).ready(function(){
var half_width = $("div").width() / 2;
$("div").css("left", -half_width);
});
here is the css
div{
background: #555;
height: 100px;
width: 100px;
position: absolute;
}
here is the html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> </script>
</head>
<body>
<div>
</div>
</body>
</html>
It is absolutely possible in CSS only. You need 1 wrapper div, however:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
position: absolute;
left: 0;
}
div#wrapper div {
position: relative;
padding: 30px;
background: yellow;
left: -50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div>this div is halfway hidden, no matter what size it is.</div>
</div>
</body>
</html>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)