Menu
I have some experience with Java , C , databases , networking etc..But anything related with Html I am a begginer.The only thing that I am looking for is to center two words in the middle of the page(This page will have only those two words).
WORD1
WORDWORDWORDWORD2
I have tried some WYSIWYG software like KompoZer, but when I looked to the source code, it had generated a horrible static code with a lot of <br> to achieve the vertically center of the page.Anybody could help me finding a good solution to this problem
256
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
We use align=”center” attribute to set the text content into center. The align=”center” attribute is used to set the text content into center. Example 1: HTML.
Use the CSS line-height property Add the line-height property to the element containing a text larger than its font size. By default, equal spaces will be added above and below the text, and you'll get a vertically centered text.
Centering horizontally is easy - centering vertically is a bit tricky in css as it's not really supported (besides table cells <td>, which is bad style for layouting unless a table is really needed as - well - a table). But you can use semantically correct html tags and apply table display properties to it.
That's one possible solution - there are many approaches, here is a good article on that.
In your case something like that should be sufficient:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Hello World</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
</html>
You can put the text inside a <div> and align the text using CSS :
<div style="text-align:center;">
WORD1<br />
WORDWORDWORDWORD2
</div>
the <div> is a block element which means it will be stretched to 100% width and the text will be in in the center of the page
jsFiddle example
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
