How to center div? - javascript

I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
Only chrome center this div in to the middle of the screen.

This will center the <div> horizontally:
#container{
width: 366px;
height: 274px;
margin: 0 auto;
}
Centering vertically is not quite simple, you maybe have to use javascript for that, or you try this css solution.

#container{
width: 366px;
height: 274px;
top: 50%;
left: 50%;
margin: -137px 0 0 -188px;
position:absolute;
}

This does the trick (vertical & horizontal):
#container{
position: absolute;
width: 366px;
height: 274px;
left: 50%;
top: 50%;
margin-left: -183px; /* half width */
margin-top: -137px; /* half height */
}

You could use:
#container {
// Your other values, but remove position: absolute;
margin: 0 auto;
}
Alternatively, you can do:
#wrapper, #container {
border: 1px solid red;
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
And you're HTML code:
<div id="wrapper">
<div id="container">
<h1>Centered Div</h1>
<p>
This div has been centered within your browser window.</p>
</div>
</div>
That will center the <div> in the middle of the browser window.

Try this one:
<div class="cont">
<div class="box"></div>
</div>
Css:
.cont{
background-color: tomato;
width: 600px;
height: 400px;
position: relative;
}
.box {
width:100px;
height:100px;
background-color: teal;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}

Should be fine to use just CSS:
here is the demo
#container{
width: 366px;
height: 274px;
margin: 50%;
top: 50%;
left: 50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}​

Related

how do I maintain Aspect Ratio 16/9 on a div and not have it bleed outside the container?

What I need is
x[]x
AND
x
[]
x
dynamically maintaining aspect ratio with WIDTH and HEIGHT. Think object-fit but for div.
Example of the problem: https://codepen.io/anon/pen/erRvGx?editors=1111
What I have tried without much success
.AspectRatio {
height: 0;
overflow: hidden;
padding-top: 56.25%;
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video {
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
like this ?
.box1 { width: 200px; height: 100px; position: relative; background-color: red; margin-bottom: 20px; }
.box2 { width: 100px; height: 150px; position: relative; background-color: red; margin-bottom: 20px; }
.box3 { width: 300px; height: 300px; position: relative; background-color: red; margin-bottom: 20px; }
.video { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: yellow; }
<div class="box1">
<div class="video"></div>
</div>
<div class="box2">
<div class="video"></div>
</div>
<div class="box3">
<div class="video"></div>
</div>
top: 50%; left: 50%; transform: translate(-50%, -50%); this code solves the problem

How to center logo in navbar when there's another element in the navbar also?

In my navigation bar there is a logo which should be centered, and a menu button image (3 lines) which should be floated left. I've gotten the menu button to float left but just cannot seem to get the logo to be in the exact center of navbar, it's always a bit to the right.
I've tried puttin them both in divs and setting div width to 50%, then float the image left so it makes it centered but no luck.
HTML:
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
</div>
</div>
CSS:
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo{
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
}
Added: left: 0; right: 0; margin: auto; to #resp-logo
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
left: 0;
right: 0;
margin: auto;
}
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="https://placehold.it/20x20">
<img id="resp-logo" src="https://placehold.it/500x100">
</div>
</div>
Try setting the menu icon as position: absolute; and normalize the rest
Use the following which may help
<div id="resp-navvar>
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
#resp-logo {
positions:absolute;
left:50%;
Transform:translate(-50%);
Width- custom, height- custom
}
Don’t forget to put the root div position to relative if things don’t work
Remove these from #resp-logo
position: absolute; display: inline;
Or You can force it to center using margins.

Horizontally center rotated div in smaller parent

I want to horizontally center a -10 degree rotated div in a smaller parent.
I want this so that the middle point of the rotated div is in the center of the parent block. (I marked the middle point with some test text. But this is just to mark it).
How to go about this?
https://jsfiddle.net/ytL9ybww/3/
body {
padding:0 0 0 0;
margin: 0 0 0 0;
padding-left:300px;
overflow:hidden;
}
nav {
height:100vh;
width:300px;
position:fixed;
top:0;
left:0;
background-color:black;
}
.block {
width:100%;
position:relative;
overflow:hidden;
}
.rotated-block {
position:relative;
z-index:10;
top:300px;
left:0;
text-align:center;
width: 5000px;
height:900px;
background-color:green;
transform:rotate(-10deg);
}
<div class="block">
<nav>
</nav>
<div class="rotated-block">
test
</div>
</div>
First center the block (absolute positioning and a transform) then rotate it.
.parent {
height: 80vh;
width: 80vw;
margin: 1em auto;
position: relative;
border: 1px solid grey;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
background: red;
width: 110%;
height: 50px;
}
.center {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
<div class="center"></div>
</div>

Centering div vertically and horizontally

Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.

CSS Drawing a line between two elements

I've been trying to draw a line down the middle of a series of circles however if I set a line (.Line1) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. If i set a line (.Line2) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around.
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements.
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe
You need to take border, width and height into account. you cannot draw half a pixel. For example this is a center line:
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}
give one of the lines a margin-left that will be equal to half of the circle's width.
that way the line will always stay in the middle no matter if you zoom in or out.
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}
You need to wrap your circles into a parent Element. So that you can align the Black line according to the parent Div and not the window size.
Moreover you can use the pseudo selector :before or :after for the line.
HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
Checkout this pen

Categories