I'm trying to centralize images (both x and y axis) in a container in bootstrap. When I was working in non-responsive designs, I would just used this method:
.container{display:table-cell; vertical-align:middle; text-align:center; width:500px; height:300px;}
.container img{display:block; margin:auto;}
It worked fine but I can't use this method in bootstrap because the height of the container is not constant. So how can I centralize images in bootstrap?
When the height of the object you want to center and/or the container are unknown, you can use this trick from csstrick. In short, we introduce a pseudo element as follows:
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.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;
}
Related
I'm currently working on my very first responsive webdesign working with Bootstrap 3.
What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.
The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.
You can see the problem in this jsfiddle:
http://jsfiddle.net/usD2d/
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
li img {
width: 100%;
min-height: 100%; /* destroys aspect ratio */
}
If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.
Surely I could use #media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.
Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?
Thank you very much in advance!
If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.
example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.
ul {
width: 100%;
}
li {
display: block;
float: left;
width: 24%;
height: 150px;
overflow: hidden;
border: 1px solid black;
text-align:center;/* set image in center */
line-height:150px;/* set image or text right in middle;*/
}
img {
min-width: 100%;
vertical-align:middle;/* okay see it in middle , but you can tune this */
margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}
the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.
This a CSS cropping.
I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
to
li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}
I am vertically aligning a div using Michał Czernow's technique posted on CSS Tricks:
HTML
<div class="block">
<div class="centered">
Unknown stuff to be centered.
</div>
</div>
CSS
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.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;
}
http://css-tricks.com/centering-in-the-unknown/
This method works perfectly, however, if I have content that exceeds the height of the browser window, the content breaks outside of its div.
My question is this. Is there a way to keep height: 100%, but make height: auto for divs that exceed the browser height (if possible without js)?
Thanks in Advance!
min-height:100%? Seems like a simple solution unless I'm missing something.
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 want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>
My dilemma is this (and should be simple, I suspect): I have a container and a set of items (both divs). The following CSS applies:
.container {
float: left;
width: 100%;
}
.item {
margin: 32px;
text-align: center;
position: relative;
float: left;
}
The .item itself is a container that could have almost any set of arbitrary elements, but they need to be center aligned inside of it (in my case, it typically contains a thumbnail image and a small caption of text beneath it). While the above CSS allows each .item to flow horizontally the way I like, I can't figure out how to make the whole set center aligned (as opposed to flowing from left to right like it does now).
edit
Change .item { display: block; } to .item { display: inline-block; }, take away .item { float:left; } and add text-align: center; to .container
You can see it here: http://jsfiddle.net/JMC_Creative/RQrRb/
You could also put an .inner div with width:75%; margin: 0 auto; and then put your .items in that, if you are looking to have some space on the sides.
You'll want to take a look at this tutorial from Mozilla. It can be center aligned by just setting the parent container to text-align:center;
Cross Browser Inline Block
.container {
width: 100%;
}
.item {
margin: 32px;
text-align: center;
}