I have a table, which should be centered both horizontally and vertically. The horizontal centration works fine (using "margin: 0 auto"), but the vertical centration (using "position: relative; top: 50%; transform: translateY(-50%)") only works in Google Chrome, in Firefox, Edge & MS Explorer it does not work.
I found out that "transform" works like it is supposed to, but "position: relative" does not work in all browsers.
<table border="1" id="content">
<tr>
<td><video id="video" controls></video></td>
</tr>
</table>
#content {
margin: 0 auto;
text-align: center;
font-family: arial, sans-serif;
font-size: 15pt;
position: relative;
top: 50%;
-webkit-transform: -webkit-translateY(-50%);
-ms-transform: -ms-translateY(-50%);
-moz-transform: -moz-translateY(-50%);
-o-transform: -o-translateY(-50%);
transform: translateY(-50%);
z-index: 0;
}
Your issue is that position relative doesn't allow you to use the top, right, etc. positioning. So it's only transforming your Y.
Change it to position: absolute; instead.
#content {
/* Center #content */
margin: 0 auto;
/* Align the text */
text-align: center;
/* Setting the font */
font-family: arial, sans-serif;
font-size: 15pt;
/* Setting the position */
position: absolute;
top: 50%; left: 50%;
/* Transforming #content */
-webkit-transform: -webkit-translate(-50%, -50%);
-ms-transform: -ms-translate(-50%, -50%);
-moz-transform: -moz-translate(-50%, -50%);
-o-transform: -o-translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 0;
}
<table border="1" id="content">
<tr>
<td><video id="video" controls></video></td>
</tr>
</table>
#content {
display:flex;
justify-content: center;
align-items: center;
height:100%;
}
html,body {
height:100%;
}
If you want to use flex you can do it that way , thats all...
Look at this;
https://jsfiddle.net/uniak/z9vmnde6/
#content {
font-family: arial, sans-serif;
font-size: 15pt;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#content td {}
<table border="1" id="content">
<tr>
<td><video id="video" controls></video></td>
</tr>
</table>
Related
What I'm trying to achieve, once I reduce the size of the screen and some elements starts to move to a second line, keep them organized to the left, instead of centered (based on the number of elements on that row). This image might help
And this is my actual code, what I'm doing wrong?
#teamBoxesWrapper {
position: relative;
background-color: ;
width: 1200px;
height: auto;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#teamUser {
width: 250px;
/* 20% of the viewport width */
height: 250px;
background-color: ;
margin: auto;
cursor: pointer;
margin-bottom: 20px;
position: relative;
}
.teamUser4 {
background-image: url('../images/empleado4.jpg');
background-position: center center;
background-size: cover;
}
<div id="teamBoxesWrapper">
<div id="teamUser" class="teamUser4">
<div id="teamUserPopup4" class="teamUserDetails">
<div id="teamUserTextAligner">
<h3 class="teamUserText1">Manuel Brenes</h3>
<hr class="userHr" />
<h3 class="teamUserText2">Graduado Social y
<br>Derechos Laborales</h3>
</div>
</div>
</div>
</div>
On your code try replacing your justify-content: space-between for center;
I was wondering if I could have someone's help as I'm having difficulty vertically and horizontally centring the text in the centre of the page.
Thanks for taking the time, have a good day.
html:
<div class="somethingsimple">
</p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>
Css:
.somethingsimple
{
position: absolute;
top: 50%;
text-align:center;
margin-left:auto;
margin-right: auto;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
}
Just add width:100%; to somethingsimple like this:
.somethingsimple {
/* your current "absolute positioning" style properties */
width:100%;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/6pwth4zv/
you can additionally add this css-
transform: translateY(-50%);
this moves the text up by 50% of its height, so its centered vertically. http://jsfiddle.net/ym1tys16/
AND finally to align it center horizontally you can use -
left: 50%;
transform: translateX(-50%);
For both horizontal as well as vertical centering, use transform like this -
transform: translate(-50%, -50%);
Fiddle Demo
Full snippet -
.somethingsimple {
position: absolute;
top: 50%;
text-align: center;
left: 50%;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
<div class="somethingsimple">
<p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>
I know this issue has been discussed a lot and i have read over the other questions and answers but i have not been able to solve this issue. I am using bootstrap and i want to center a div which works in chrome and firefox however in explorer the content is on the right side of the screen. I am unsure of what approach to take in order to correct the position. The css for my page is:
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
background-color: white;
font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
color: black;
}
u {
color: red;
}
.container {
position: relative;
height: 14rem;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background-color: white;
}
.fa-exclamation-triangle {
color: red;
padding-right: 10px;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
<center>
<h3>Main Content.</h3>
</center>
</div>
</div>
</body>
I have included a fiddle Here. Thank you for any help and suggestions
It's because you are missing normal transform property (and -ms for old browsers)
http://jsfiddle.net/tvc4tv9L/2/
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Try adding transform: translate(-50%, -50%) and -ms-transform: translate(-50%, -50%) to .jumbotron for IE9+.
Another way to do this:
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
background-color: white;
font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
color: black;
}
u {
color: red;
}
.container {
position: relative;
height: 14rem;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
width:300px;
height:200px;
margin:-100px 0 0 -150px;
}
.fa-exclamation-triangle {
color: red;
padding-right: 10px;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
<center>
<h3>Main Content.</h3>
</center>
</div>
</div>
</body>
Never ever use the <center> tags. Use the css equivalent instead: text-align: center;
You forgot the -ms- prefixed translate property.
If you don't care about support for IE9 or lower: You can use flexbox for this as well.
html, body {
height: 100%;
width: 100%;
}
body {
display: flex;
background: black
}
.jumbotron {
margin: auto;
background: white;
}
.container {
text-align: center;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1>Title</h1>
<h3>Main Content.</h3>
</div>
</div>
</body>
I've made a simple under construction website which has an image and some text centred in the middle of the page like following:
HTML Code:
<body>
<div id="container">
<span id="wip">Under Construction</span>
<img id="image" src="katte.jpg">
<span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
</div>
</body>
CSS Code:
body {
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
text-align: center;
}
#container {
max-width: 1230px;
width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#image {
width: 100%;
}
#text {
font-size: 20px;
padding: 0 15px;
display: block;
}
#wip {
font-size: 40px;
padding: 0 15px;
display: block;
}
Link: http://katteboxen.dk/
Everything is working good except when it comes to iPads. The content is showing like when for example the css rule transform: translate(-50%, -50%); wasn't applied for the container. What are the alternatives for fixing this issue? Any guidance or feedback is more than welcomed.
You might need to try browser specific prefixes for transform property, so:
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
should do the trick.
For reference have a look here
transform property are browser based property set -webkit-transform, -moz-transform, -o-transform .... ans so set it according to your i-pad browser i this it will solve the problem
or just use
margin-left:-50%;
margin-top:-50%;
I have a main div (the red div in the fiddle) that has a smaller vertical tab on the side (the blue div in the fiddle).
The RED div is standard BUT the Blue div is rotated through 90 degrees (as I need to have vertical text in it). This is where the problems starts.
The red div is vertically positioned at 50% so it is in the middle of the page and locked with scrolling etc.
I want to align the blue div so that the top edge of the blue div is at the same Y position as the top edge of the red div.
I would prefer NOT to use jQuery but can do if required.
Desired output :
Fiddle is here : http://jsfiddle.net/kBKf6/
Here is the code I am using :
<div id="main" style="position: fixed; top: 50%; margin-top: -250px; left:0; height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>
You don't need JS to align the rotated div. You can define a transform origin in CSS then, it becomes easy to align.
Side note : You can remove the -moz- and -o- vendor prefixes see caniuse
DEMO
HTML :
<div id="main">Main Content Div
<div id="verticaldiv">Side Tab</div>
</div>
CSS :
#main {
position: fixed;
top: 50%;
margin-top: -250px;
left:0;
height: 500px;
width: 450px;
background-color:red;
}
#verticaldiv {
overflow:hidden;
position: absolute;
left:100%;
bottom:100%;
height:40px;
width:200px;
background-color:blue;
text-align:center;
color:white;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-ms-transform-origin:0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
You can also do it without relying on hardcoded sizes that move your div into position, but you need a wrapper around your .verticaldiv
demo:
http://jsfiddle.net/MCr6f/
demo 2:
http://jsfiddle.net/9LtKw/ (to show that different sizes don't matter)
html:
<div class="one">
Hello
<div class="pivot">
<div class="two">
Pretty!
</div>
</div>
</div>
css:
.one {
background: red;
position: relative;
float: left;
/*strange and difficult sizes*/
font-size: 3.237827em;
padding: 10px;
}
.pivot {
position: absolute;
top: 0;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
width: 0px;
height: 0px;
}
.two {
background: blue;
color: white;
position: absolute;
left: 0;
bottom: 0;
/*strange and difficult sizes*/
font-size: 12px;
padding: 0.3em;
}