How can I center the text (p) vertically and horizontally inside a div (.item)?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrapper {
width: auto;
height: 10em;
background-color: red;
position: relative;
}
.item {
width: 4em;
height: 4em;
background-color: black;
position: absolute;
display: inline-block;
color: white;
}
.item p {
text-align: center;
vertical-align: middle;
}
#top-right {
right: 0em;
}
#center {
top: calc(50% - 2em);
right: calc(50% - 2em);
}
#bottom-left {
bottom: 0em;
left: 0em;
}
#bottom-right {
right: 0em;
bottom: 0em;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="wrapper">
<div class="item" id="top-left"><p>Top Left</p></div>
<div class="item" id="top-right"><p>Top Right</p></div>
<div class="item" id="center"><p>Center</p></div>
<div class="item" id="bottom-left"><p>Bottom Left</p></div>
<div class="item" id="bottom-right"><p>Bottom Right</p></div>
</div>
</main>
<footer></footer>
</body>
</html>
It's ok to use calc (because I read that this function isn't supported in some browers)? Or there is another way to center the element #center in the div without calc()?
In your structure display:table and display:table-cell would not work because you have used position absolute in .item.
Use below css in #center which is supported in all broswers.
#center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
//top: calc(50% - 2em);
//right: calc(50% - 2em);
}
example : https://jsfiddle.net/vzk5arxe/2/
Another method.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Reference: http://colintoh.com/blog/display-table-anti-hero
You can achieve that by using display: flex. I have added below properties to your .item
display: flex;
align-items: center;
justify-content: center;
text-align: center;
Updated code snippet:
.wrapper {
width: auto;
height: 10em;
background-color: red;
position: relative;
}
.item {
width: 4em;
height: 4em;
background-color: black;
position: absolute;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#top-right {
right: 0em;
}
#center {
top: calc(50% - 2em);
right: calc(50% - 2em);
}
#bottom-left {
bottom: 0em;
left: 0em;
}
#bottom-right {
right: 0em;
bottom: 0em;
}
<header></header>
<main>
<div class="wrapper">
<div class="item" id="top-left">
<p>Top Left</p>
</div>
<div class="item" id="top-right">
<p>Top Right</p>
</div>
<div class="item" id="center">
<p>Center</p>
</div>
<div class="item" id="bottom-left">
<p>Bottom Left</p>
</div>
<div class="item" id="bottom-right">
<p>Bottom Right</p>
</div>
</div>
</main>
<footer></footer>
You can center a text inside a parent div using the grid layout which is widely supported now.
.parent-div {
display: grid;
place-items: center;
text-align: center;
}
I hope I helped!
Related
I am trying to teach myself CSS and I am struggling with alignment. What I want to achieve is to have a fixed sidebar that has some icons and a rotated text, all of them should be in a column.
My code:
HTML:
<div class="Sidebar">
<div id="S1" class="SBlock">
<img src="Twitter_Logo.png" width=10px height=10px>
</div>
<div id="S2" class="SBlock">
<img src="Linkedin_Logo.png" width=10px height=10px>
</div>
<div id="Follow" class="SBlock">
Follow Us
</div>
</div>
CSS:
.Sidebar {
position: fixed;
top: 50%;
height: 300px;
}
#S1 {
position: absolute;
left: 20%;
top: 10%;
}
#S2 {
position: absolute;
left: 20%;
top: 20%;
}
#Follow {
transform: rotate(-90deg);
font-size: 12px;
position: absolute;
left: 20%;
top: 50%;
font-family: Montserrat;
text-transform: uppercase;
overflow: hidden;
white-space: nowrap;
}
Which produces this:
Result:
It works fine for the icons, I assume that is because they are the same size, but the text is way further to the right. Any ideas?
.Sidebar {
position: fixed;
top: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.SBlock {
margin: 10px 0;
}
#Follow {
transform: rotate(-90deg);
font-size: 12px;
font-family: Montserrat;
text-transform: uppercase;
white-space: nowrap;
writing-mode: vertical-rl;
text-orientation: mixed;
}
Try this...
Try to use writing-mode: sideways-lr instead of transform: rotate(-90deg) to avoid the extra space. And you don't need position: absolute to get all items align in the sidebar.
Read more about writing-mode.
.Sidebar {
position: fixed;
height: 300px;
display: flex;
flex-direction: column;
background: red;
align-items: center;
width: 50px;
}
#Follow {
font-size: 12px;
font-family: Montserrat;
color: blue;
writing-mode: sideways-lr;
}
<div class="Sidebar">
<div id="S1" class="SBlock">
<img src="Twitter_Logo.png" width=10px height=10px>
</div>
<div id="S2" class="SBlock">
<img src="Linkedin_Logo.png" width=10px height=10px>
</div>
<div id="Follow" class="SBlock">
Follow Us
</div>
</div>
I'd suggest you use Flexbox which is so nice for designing layouts also, alignment is so easy using it.
This article is a good point to start:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So In my website I am using the current code to split the page in 50% and 50%. But I want to chang it to 70% and 30%. The code below is my current code.
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: red;
}
.right {
right: 0;
background-color: blue;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="split left">
<div class="centered">
<h2>70%</h2>
<p>Some text</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>30%</h2>
<p>Some text</p>
</div>
</div>
</body>
</html>
I tried changing the left: 50%; to 70%, but that just moves the text a bit to the right.
Remove 50% from the .split class and add width: 70% in .left, width: 30% in .right.
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: red;
width: 70%;
}
.right {
right: 0;
background-color: blue;
width: 30%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<div class="split left">
<div class="centered">
<h2>70%</h2>
<p>Some text</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>30%</h2>
<p>Some text</p>
</div>
</div>
Fiddle code
I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>
To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>
I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
I'm working on webpage and divided it into several divs before adding text in it.
but when i put some text in one of that divs, all divs position just collapses.
I've made simple code to show the problem.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Issue</title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
As you can see, it is divided well without problem(at least in my opinion)
But as soon as you add the text in the div, it just collapse and I can't see why.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
p{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
It collapses whether p tag exists or not.
Divs are positioned with %unit and it is relative.
So it should be relevent only to it's parent and brothers in my thought.
Should I reallocate all of them with absolute position?
If you know why, or have solution, please teach me.
thank you!
Put vertical-align: top; to .box by default it has vertical-align: baseline;
.box {
display: inline-block;
vertical-align: top;
position: relative;
background: black;
}
Alternative beside Ismail Farooq's answer
.box {
display: block;
position: relative;
background: black;
float: left;
}
I am using flexbox link is Flexbox here
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 49%;
}
#box-2{
height: 50%;
width: 49%;
}
#box-3{
height: 50%;
width: 49%;
}
#box-4{
height: 50%;
width: 49%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
</body>
</html>