This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 1 year ago.
im new in coding.
I want add a box to my page. The box must be centered how can i do?
I did try that codes but isn't working.
enter image description here
.panel{
background-color: #FF2D00;
border-radius: 10px;
height: 25.625em;
left: 5em;
position: absolute;
top: 50%;
}
<div id="panel"></div>
You need to give your element a width and also use a class attribute in your html.
.panel{
background-color: #FF2D00;
border-radius: 10px;
height: 100px;
width: 100px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%)
}
<div class="panel"></div>
#panel{
background-color: #FF2D00;
border-radius: 10px;
height: 25.625em;
width: 300px;
left: 5em;
position: absolute;
top: 50%
left:0;
right:0;
margin: auto;
}
<div id="panel"></div>
Give the element a width
Set the left and right to 0
Set the margin to auto
and lastly change the selector to #
:)
You can use margin: 0 auto; to horizontally centered the box
.panel{
background-color: #000000;
border-radius: 10px;
height: 25.625em;
width: 200px;
margin: 0 auto;
}
<div class="panel"></div>
Related
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Fit, scale and center image responsively to browser window (CSS)
(1 answer)
How can I center a responsive image
(6 answers)
How to keep an image centered and responsive?
(8 answers)
Closed 2 years ago.
I am desperately trying to put my image between 2 div blocks and that this one be responsive.
I suggest taking a square image because as you can see I want my image to fit in a circle and since the height is set to auto in my absolute-block(because I want to keep the responsive behavior) the shape would be a rectangle.
html, body {
width: 100%;
height: 100%;
}
.child1 {
width: 100%;
height: 200px;
background-color: red;
}
.child2 {
width: 100%;
height: 200px;
background-color: green;
}
.main {
position: relative;
width: 100%;
}
.absolute-block {
position: absolute;
top: 25%;
left: 40%;
width: 16%;
border: 2px solid yellow;
}
img {
height: 100%;
width: 100%;
border-radius: 50%;
border: 5px solid white;
}
<body>
<div class="main">
<div class="absolute-block">
<img src="test.jpg">
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
So if everything goes well it should look something like that:
And now when I try to horizontally shrink the size of my window, I would like the size of my image to shrink vertically and horizontally (ok that works) and I would like the center of my image to stay between the 2 divs (it doesn't work). What can I change to my code to get this result?
First just center the absolute block in the middle of the container, we can do that with
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
top and left will position the element according to it's top left corner, Then we use transform to shift the element half way in both direction according it's own width and height.
Now once the block is perfectly centered we can add whatever we want inside it.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.child1 {
width: 100%;
height: 200px;
background-color: red;
}
.child2 {
width: 100%;
height: 200px;
background-color: green;
}
.main {
position: relative;
width: 100%;
}
.absolute-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16%;
border: 2px solid yellow;
}
img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
border: 5px solid white;
}
<div class="main">
<div class="absolute-block">
<img src="https://i.picsum.photos/id/353/300/300.jpg">
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
Would you like to give a try with following,
img {
width: 100%;
height: auto;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Closed 3 years ago.
I want to position my element relative to my window for which i use fixed position but in one case it does behave strange.
My code looks like this:
<div style="
padding-left: 5px;
padding-right: 5px;
margin-left: 50%;
transform: translateX(-50%);
display: inline-block;
max-width: 300px;
width: 300px;
background-color: red">
something
<div style="width: 100px; height: 100px; background-color: blue; position: fixed; left: 0">
Gallery
</div>
</div>
As you can see second element is fixed and IT HAS TO BE inside first element but for some reason translate property also moves fixed child elements. What can i do to achieve this?
Here is the fiddle:
Fiddle
Because transform is purely visual. It's not actually moving the element in the layout.
It seems unlikely that a fixed position element has to be inside an non-fixed one though.
I'm unsure why you are centering the parent like that though, it's unnessarily complicated.
As an alternative:
body {
margin: 0;
padding: 0;
text-align: center;
}
.parent {
padding-left: 5px;
padding-right: 5px;
display: inline-block;
max-width: 300px;
width: 300px;
background-color: red;
}
.gallery {
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
left: 0;
}
<div class="parent">
Contents
<div class="gallery">Gallery</div>
</div>
You can try this:
<div class="wrapper">
something
<div class="gallery">
Gallery
</div>
</div>
and
body {
margin: 0;
padding: 0;
}
.wrapper {
padding-left: 5px;
padding-right: 5px;
position: fixed;
left: 50%;
transform: translateX(-50%);
max-width: 300px;
width: 300px;
background-color: red
}
.gallery {
width: 100px; height: 100px; background-color: blue;
}
here your fiddle modified
I am trying to draw 2 outer circle around a circle and keeping the text as vertically centered.
I am able to draw a circle outside a circle but not the 3rd one.
Html
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>
Demo : http://jsfiddle.net/squidraj/7vusbo0v/1/
The text is also not centering horizontally.
Any help is highly appreciated. Thanks in advance.
Here is my solution, based on your code:
Creating a "3rd circle" by using the parent #container
centering the text by using the display:table-cell(which allows you to vertical align elements)
#content {
border-radius: 50%;
height: 320px;
width: 320px;
position: relative;
box-shadow: 0 0px 0 10px green;
margin: 10px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 300px;
width: 300px;
position: absolute;
box-shadow: 0 0px 0 10px black;
top: 10px;
left: 10px;
display: table;
}
#outer-circle p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>
I was editing my answer by the time it got accepted and received comments on, but no matter what I'm giving the other solution i was typing at the time:
Applying the border property to your #outer-circle would do the "3rd circle" since you are using box-shadow on it.
to vertical align the text, same solution as the 1st one.
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 300px;
width: 300px;
position: absolute;
box-shadow: 0 0px 0 10px green;
top: 10px;
left: 10px;
display: table;
border: 10px solid black;
margin:10px;
}
#outer-circle p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>
There is nothing different with them being in a circle, so follow the normal centering rules
The specifics are dependant on what browsers you need to support
Patrick's reference is correct. Give the following a try:
#outer-circle p {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: -5px;
}
Note that I've added a negative top margin, which accounts for your border width.
set you css
#outer-circle p {
bottom: 0;
left: 0;
/* position: absolute; */
right: 0;
text-align: center;
padding: 50% 0;
top: 0;
}
see https://jsfiddle.net/fwzfoncy/
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I have been stuck with this annoying issue that I have...I cannot center a text inside a div.
I managed to get the text to BEGIN at the center, but I want the text in whole to be centered.
Here is my example - any tips and tricks are VERY appreciated.
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
#TEXT {
position: absolute;
top: 30px;
left: 50%
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
My example: http://jsfiddle.net/y97myrap/
<div style="text-align:center;">
data is here
</div>
in html5
use text-align:center;, this will work if you give width to the concerned div....
Make div 100% wide, then text-align:center; will push everything in center
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
#TEXT {
position: absolute;
top: 30px;
width:100%;
text-align:center;
<!-- left: 50% -->
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
try to remove position: absolute; from #TEXT
http://jsfiddle.net/y97myrap/4/
Fot centering an element using position absolute, the common way is set:
position:absolute;
left:50%;
margin left:{Minus half of the width of the element you want to center}
So, my suggestion for you case is the following:
http://jsfiddle.net/y97myrap/1/
using an outside container div and then adding text-align to that one,
and if you want to center the height as well, if the parent height is fixed you can just use a line height on the text the same height as the container, like this:
http://jsfiddle.net/y97myrap/5/
You can use display: table tecnique. Add table in container and table-cell in child element:
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
display: table;/*Add display table*/
}
#TEXT {
display: table-cell;/*Add display table cell*/
vertical-align: middle;/*add vertical-align middle*/
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
the problem in your fiddle is that you have position:absolute; and a left of 50%...I'm guessing u tried to center it this way, but the problem is the text block will start after 50%. Remove position, give it text-align:center;.
And to align it vertically consider using table cells
Remove the position:absolute and just add auto margings to your #TEXT:
#TEXT {
top: 30px;
left: 50%
margin-left: auto;
margin-right:auto;
}
#TEXT {
position: relative;
top:20%
}
Try it
It's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the width.
Code:
#box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
It will make the position of the object fixed, you can adjust the positions of the div as per your need.
This code solved it:
#TEXT {
position: relative;
display: block;
text-align: center;
width: 100%;
top: 30px;
}
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child