If this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="you">
Gmail
Apps
You
Sign In
</nav>
<form>
<img src="static/Google-logo-520x245.jpg" width="250" height="125" alt="Google Logo">
<br>
<input type="text" name="search">
<button id="left" name="Google">Google Search</button>
<button id="right" name="Feeling">Feeling Lucky</button>
</form>
</body>
</html>
Then why doesn't the justify-content: space-around option put space between my 2 buttons instead they overlay.
I am trying to keep the image, input field and buttons all aligned to the center vertically and each on their own row horizontally.
my css
#you {
position: fixed;
right: 5px;
height: 40px;
top: 0;
padding-top: 15px;
}
#you a {
text-decoration: none;
margin-right: 6px;
}
input {
width: 400px;
/*display: block; */
position: fixed;
top: 100%;
left: 50%;
border: 1px solid #999;
height: 25px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
}
button {
position: absolute;
top: 135%;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
i rewrote your css.
form{
text-align: center;
margin-top: 100px;
}
img{
display: block;
width: 250px;
margin: 0 auto 20px auto;
}
input{
margin-bottom: 20px;
}
Please take notice of the centering techniques i have used:
text-align: center - Highly effective for inline displayed elements.
fixed width + margin: 0 auto - Effective when you have a block element.
You should add display:flex property to the parent, and justify-content: space-around; property too for getting space around its children.
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
display:flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
button {
position: absolute;
top: 135%;
}
Hope helps!
By wrapping your elements with a div.wrapper and by removing the fixed position from your elements it should work.
Have a look at this updated fiddle:
http://jsfiddle.net/nj0mgwdr/4/
The .wrapper div css
.wrapper{
margin: 0 auto;
width: 300px;
text-align: center;
}
Related
I use this way:
.centr {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The site is like this:
The problem is picture in picture, it is not in place
One way of centering a <video> element inside a parent div is using a flexbox:
.container {
/* just styling, nothing important */
background-color: gray;
width: 500px;
height: 200px;
/* note these lines below */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
video {
width: 300px;
height: 150px;
background-color: #000;
}
<div class="container">
<video></video>
</div>
To make auto margin work, the center class must have a width:
.center {
margin: 0 auto;
width: 400px;
}
Then, rather than a container, I'd apply the center class to the video itself:
<video class='center'>
</video>
I want to make the element which has id "all" centered on the overall website. Is there something wrong in my code? It does not work properly
#all{
position: absolute;
width: 55%;
margin: 0 auto;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
Use left: 50%; transform: translateX(-50%); to center an absolutely positioned element horizontally.
#all{
position: absolute;
width: 55%;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
left: 50%;
transform: translateX(-50%);
}
<div id="all">all</div>
Try to code like below
#all{
position: absolute;
width: 55%;
top: 150px;
left: 50%;
margin-left:-27.5%;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
I would use it with 2d translate to vertical align it in all screen sizes, as this:
.myClass {
position:fixed;
width: 55%; // or what ever fixed or precentage value
top: 50%;
left: 50%;
// height: 150px; // if height is known
// margin-top: -75px; // if height is known - minus half the height
transform: translate(-50%, -50%); // if height is unknown
}
I'm running into problems trying to center a body element with CSS. I want it to be centered both horizontally and vertically on the page. The problem is that how it's written right now, it will center the text for short messages (i.e. under three words), but longer messages mess it up.
Here's my CSS: (it's an erb file for Sinatra, but I don't think that should impact how the CSS is interpreted)
body {
background: white;
/*TODO: still not perfect; changes based on length of message */
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.message {
color: #2f4f4f;
font-family: 'Roboto', sans-serif;
font-size: 36;
text-align: center;
}
.form {
text-align: center;
}
input[type=number]{
width: 100%;
border: none;
border-bottom: 6px solid #2f4f4f;
background: transparent;
text-align: center;
color: #2f4f4f;
font-size: 25px;
font-family: 'Roboto';
}
input[type=number]:focus {
outline: none;
}
#btn{
display: none;
}
body {
/* ... */
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please make sure you remove the margin.
Try use 'flexbox' to your page
.container {
display: flex;
height: 500px;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="content">
Content
</div>
</div>
You can use display: flex
html, body {
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
Demo
HTML
<div class="test">
<div class="content">
<p class="para">test test test</p>
</div>
</div>
CSS
.test { }
.para {
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
I want to put the div.father at the center of the screen,and to put the div.son at the center of the div.father.
Here is what i wanted.
How to rewrite my css code to get the result?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title> boxes</title>
<style type="text/css">
div.father{margin: 0 auto;width:300px;height:300px;border:1px solid black;}
div.son{margin: 0 auto;width:100px;height:100px;border:1px solid black;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
You can use flexbox. Add to parent div display: flex and justify-content: center(for horizontal align) with align-items: center(for vertical align):
div.father {
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;/*add this*/
justify-content: center;/*add this for horizontal align*/
align-items: center;/*add this for vertical*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="father">
<div class="son"></div>
</div>
Edit: For horizontal and vertical align in the middle of the screen you can use the trick described to this article Centering Percentage Width/Height Elements.
References
flex
Following css will make center both div.
display:flex and position:absolute will do the trick.
align-items: center; will center child div vertically and justify-content: center; will horizontally inside parent.
div.father {
align-items: center;
border: 1px solid black;
display: flex;
height: 300px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
}
<div class="father">
<div class="son"></div>
</div>
Working Fiddle
You could do this:
div.father {
margin: 0 auto;
width:300px;
height:300px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width:100px;
height:100px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="father">
<div class="son"></div>
</div>
position: absolute will be place son and father out of flow. With top and left you will place item to the offset you want from the first parent with a position absolute/relative/fixed or <body> and transform: translate(-50% -50%) will re-center element not from top-left corner but center.
NOTE: you could use the -moz-, -o-, -webkit- and -ms- prefix before transform for old version browser.
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
You could also use flex to reach the same goal but if you want support all IE familly, use a polyfil for flex.
Try this one......
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
}
.parent{
border:1px solid;
width: 400px;
height: 400px;
margin: 0 auto;
display: flex;
align-items: center;
}
.child{
border:1px solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
<div class="parent">
<div class="child"></div>
</div>
Add this property in div.father class
div.father{position:relative;}
Add this property in div.son class
div.son{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height:100px;
width:100px;
margin: auto;
}
This will work cross browser
I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.
My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.
Any ideas?
I've created a fiddle here with three examples.
HTML:
<div class="container">
<div class="splash">Lorem</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum dolor</div>
</div>
CSS:
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table-cell;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute
<div class="container">
<div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum dolor<span></div>
</div>
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
span{
display:table-cell;
vertical-align: middle;
}
You could create an extra span tag inside .splash and center it via position absolute and transform translate trick
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.splash span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
For a markup like this :
<div class="container">
<div class="splash"><span>Lorem</span></div>
</div>
An example: http://jsfiddle.net/tdtx3cfe/3/
As one of the options, you can align splash with flexible boxes:
.container {
width: 70px;
height: 70px;
display: inline-flex;
border-radius: 50%;
background: green;
justify-content: center;
align-items: center;
}
.splash {
color: white;
text-align: center;
transform: rotate(15deg);
}
body {
display: flex
}
I had to add body style to vertically align containers.
JSFiddle.