The element has a variable width, so I don't know it.
Is it possible to center this element inside its wrapper element?
The wrapper has a fixed width of 960px...
Add text-align: center; to the wrapper, and then display: inline-block; to the child
Or add display: table; andmargin: 10px auto; to the child element
Or position: relative; left: 50%; float: left;
Yes, as long as you have margin:0 auto; with the variable width specified...
Here is an example: http://jsfiddle.net/traMU/
Related
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.
How can I set the text's line-height to be the same as it's parent if I don't know the parent's height?
line-height: 100% is relative to the font's regular height so this doesn't help...
Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.
.block::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Since it's 2019 already, you could also use flexbox to achieve this :)
To do so, add the following classes to the parent element:
display: flex;
flex-direction: column;
justify-content: center;
See this Fiddle
I'd try putting the text inside another element, of which you know (or set) the size. Then setting relative positioning to it, top, left 50% and negative left and right margins.
See this Fiddle
The only problem is that this relies on a known/fixed textblock. If the text is variable, I'm afraid you will have to resort to using Javascript..
Regarding hyperlinks:
I was having this problem regarding links in main menu. And since it was <a> in <li> tags I needed some surface for the links to be clickable/touchable(see touch target size).
So what I did was for the <ul> I set a fixed height(through it's parent in this case), the <li>-s are a percentage of it and the <a>-s have a min-height and line-height properties set to them and it's easy from there to set the top. The code:
.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}
.menu-header-main-container ul.menu {
height: 100%; }
.menu-header-main-container ul.menu li {
height: 33.33%;
max-height: 110px; }
.menu-header-main-container ul.menu li a {
line-height: 40px;
min-height: 40px;
top: calc(50% - 20px);
position: relative; } }
You cannot set the line-height to 100% of the parent element's height with only CSS. Rather, you can use CSS to center an element vertically.
.parent {
height:150px;
position:relative;
border:1px solid #FDD;
}
.position-center {
position:absolute;
top:50%;
transform:translateY(-50%);
}
<div class="parent">
<span class="position-center">I am vertically centered element</span>
</div>
Wow, 2022 and I don't think we have a decent way to do this still. What I used to do and I think is the less painful idea is to use a table for layout. Tables will naturally center text vertically, or you can use "vertical-align"
<table style="width: 100%; height: 100%; text-align: center">
<tr><td>Your text</td></tr>
</table>
Not great, but at least you can center text without ever having to specify fixed heights.
I am trying to center my a .img-link tag within a thumbnail but haven't had any luck.
Here is a link to an example of what I am doing http://jsfiddle.net/Dhk3M/ .
Is this possible?
Give .thumbnail text-align:center. Write like this:
.thumbnail {
text-align: center;
}
Check this http://jsfiddle.net/Dhk3M/1/
to auto center an element, it has to have a fixed width so you can apply margin-left: auto;
and margin-right: auto;
.img-link img {
width: 267px;
margin: 0 auto;
display: block;
}
this is valid if you can actually set the element width in your css, that means you know the element will always have the exact same width. alternatively:
text-align: center;
will work for inline elements (like an img tag)
I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.
How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div?
I know the position: absolute trick with negative margins, but this situation calls for something different.
Here's the code:
.OuterCase {
position : absolute;
width : 100%;
height : 100%;
text-align: center;
}
.InnerItem {
width : 38px;
height : 38px;
display: inline-block;
}
I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.
Much simpler:
position: relative;
left: 50%;
transform: translateX(-50%);
You are now centered in your parent element. You can do that vertically too.
Alternatively, you may also use the CSS3 Flexible Box Model.
It's a great way to create flexible layouts that can also be applied to center content like so:
#parent {
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto
Vertical centering is a bit tricker, but possible.
You can use calc to position element relative to center. For example if you want to position element 200px right from the center .. you can do this :
#your_element{
position:absolute;
left: calc(50% + 200px);
}
Dont forget this
When you use signs + and - you must have one blank space between sign and number, but when you use signs * and / there is no need for blank space.
Another option is to create an extra wrapper to center the element vertically.
#container{
border:solid 1px #33aaff;
width:200px;
height:200px;
}
#helper{
position:relative;
height:50px;
top:50%;
border:dotted 1px #ff55aa;
}
#centered{
position:relative;
height:50px;
top:-50%;
border:solid 1px #ff55aa;
}
<div id="container">
<div id="helper">
<div id="centered"></div>
</div>
<div>
.parent {
width: 100%;
height: 30vh;
display: flex;
justify-content: center;
align-items: center;
}
.child {
position: relative;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
Just make sure the height of the parent is greater than the height of the child.
An other simple solution I did not yet see here:
.parent{
display: flex;
flex-direction: column;
height: 40vh;
width: 40vw;
}
.child{
margin:auto;
}