In the shopping, cart images need to center vertically in thumbnails.
I tried html
<a class="productselect-image" href="/Details/131631?lang=et">
<img src="/Image/Product?product=131631&size=228">
</a>
CSS:
.productselect-image {
height: 260px;
position: relative;
display: block;
overflow: hidden;
vertical-align: middle;
}
.productselect-image img {
vertical-align: middle;
}
But the image will appear at the bottom. How to center in vertically as pointed by reading arrow:
short images appear in bottom and cart looks ugly. How to make it nicer?
Bootstrap 3 and ASP.NET MVC4 are used.
.productselect-image{
display: flex;
justify-content: center;
align-items: center;
}
How about using display:flex?
It's my output
If you know your height you can use line-height to be the same as height, else go with display: flex;. Also use a max-width and max-height to keep your images in inside the productselect-image
.productselect-image {
height: 260px;
line-height: 260px;
position: relative;
display: block;
overflow: hidden;
}
.productselect-image img {
max-width: 100%;
max-height: 100%;
}
Since the image parent is already positioned relative you can just add this to the image css
.productselect-image img {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
max-width: 100%;
}
This is the most standard way of centering things vertically.
try using bootstrap
the code is something like this
<div class="thumbnail" style="width: XXpx; height: YYpx">
<div class="thumbnail_wrapper">
<img src="#"/>
</div>
</div>
Related
I have 2 images of identical size that need to overlap perfectly and remain overlapped while the window re-sizes. For some reason, setting position: absolute; reverses the centering.
Here is the code so far, i've replaced my images with generic ones found on google images.
<img src = "http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" width = 50% height = auto style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src = "https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" width = 50% height = auto style = "position: absolute; z-index: 2; top: 50%; margin-left: auto; margin-right: auto; display: block;">
Does anyone know how to fix this?
Thanks.
You have to use a container box that contains your two images and add position: relative to that box. Also you can use flex to center the content of the box. Finally add position: absolute to the image you want to overlap. Here is an example:
.container {
width: 50%;
display: flex;
position: relative;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.container img {
width: 100%;
}
.container img.overlap {
position: absolute;
}
<div class="container">
<img src="https://dummyimage.com/300x300/c9c9c9/fff">
<img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>
I hope this is what u are looking for :)
Note: Please take the time to read https://stackoverflow.com/help/how-to-ask, people here cannot help you if you do not provide any code
html, body {
height: 100%;
}
div {
top: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
width: 300px;
transform: translateY(-50%);
}
img {
max-width: 100%;
}
.overlap {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div>
<img src="https://via.placeholder.com/300x300">
<img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>
You can keep one image as div background and another as content of the div
HTML
.imageCont{background: url('http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif') center no-repeat; width:300px; height:300px;display:flex; align-items:center;justify-content: center;}
<div class="imageCont">
<img src ="https://via.placeholder.com/300x300"/>
</div>
Let me know if this suits for you.
Based on the codes provided by you, you can use the code below to achieve the desired output.
<div>
<img src="http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" style="position: absolute;top: 0;left: calc(50% - 150px);">
</div>
sorry for bothering you guys... but i've been trying for too long now to center a simple div. I tried so many things and I couldn't find what's wrong but would like to understand why since i'm a still a newbie.
So to make it short I would like to center the blue and white arrow horizontaly.
This is my site: xaviergodbout.com
Thanks to anyone who'd help me!
You just have to add text-align:center to div and it will center.
#down {
margin-left: auto;
margin-right: auto;
margin-top: 85vh;
width: 100%;
position: absolute;
text-align: center;
}
There are several different ways to centre a div element.
First method, involves setting the div to display: inline-block; and settings the enveloping div to text-align: centre;.
CSS:
.my-div-container {
text-align: center;
}
.my-div {
display: inline-block;
}
HTML:
<div class="my-div-container">
<div class="my-div">My div</div>
</div>
Second method, involves centre aligning the div via the position and transform attributes. Here's how:
CSS:
.my-div {
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1024px;
}
Third method, fix sizing the div and using margin to centre it.
CSS:
.my-div {
margin: 0 auto;
width: 1024px;
}
Try this
.waves-effect{
margin: 0 auto;
display: block;
}
.classname{
width:100%;
margin: 0 auto;
display: block;
}
Please try this:
#down {
margin-left: auto;
margin-right: auto;
width: 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
The normal way to centre a block horizontally is to use margin: auto. It also requires changing the display block from the default inline:
div#down>a {
margin: auto;
display: block;
}
By the way, be careful with centring elements. Once you centre the arrow, the text looks off-centre because it’s left-aligned.
If you look at the Nutela image, it's parent has text-align: center;, but still it does not move the image to the center but a bit right.
.banner-img {
display: block;
text-align: center;
}
<div class="banner-img">
<img src="http://2alkk028sg9z46cvf24elwx2.wpengine.netdna-cdn.com/wp-content/uploads/2016/04/nutella-754483_640.jpg" />
</div>
Whats going on here?
Their is nothing wrong with image the problem is with your outer div .banner-img you need to add float: left; width: 100%; and every thing will be fine or you can add overflow: hidden; width: 100%;
I couldn't figure out what was causing that behaviour, but one option to center a div is:
.parent
{
position: relative;
}
.centered
{
position: relative;
left: 50%;
transform: translateX(-50%);
}
I have a problem with CSS that's only visible in FireFox (cur.ver. 31).
I am trying to make a responsive layout, with a row of images (with links), that are centered, and having the same height and scale with the viewport width. My approach is to create a container with a fixed aspect ratio, and place the images inside (each image inside a separate <a> tag), center them, and scale their heights to the container height. It's working great, except in FireFox.
To achieve this I applied a display: inline-block; height: 100% to <a> tag and height: 100%; width: auto to <img> tags. For some (unknown) reason FF is not calculating the width of the <a> tag correctly (when it contains described above <img> tag) and it collapses horizontally. The result is, that all <a> with 0 width are placed very close to each other (separated only by white spaces), and the images overlap each other. I get the same result with display: block; float: left; on <a> tags.
The CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width: auto;
display: block;
}
The HTML
<div class="container-ratio">
<div class="container-inner">
<a class="block">
<img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
</a>
<a class="block">
<img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
</a>
<a class="block">
<img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
</a>
</div>
</div>
I think this is what your trying to do. Demo
You had no width on .block and auto on .block img.
It needs to be percentages.
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
width:20%;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width:100%;
display: block;
}
It's been nearly two years since this question was asked, and Firefox still exhibits this behavior.
So, for anyone in the same situation, here's a solution (only tested on Chrome 49.0 and Firefox 45.0.1).
Edit:
Originally, I used inline wrapper divs and two instances of the images, one of which was not displayed and only served as a dummy. It appears this is not necessary, as can be seen here.
All in all, it seems you can't use inline-block that way in Firefox, but all you need to do to get what you want is leave the anchors and images as inline elements. As long as the anchor's parent is a block-level element other than inline-block, and its height is specified, then you'll get the intended result.
If, for some reason, inline-block is really needed, I don't see how to work around this problem.
Note:
Beware of the "font-size: 0;" on the .block class, used to remove spaces between the images. Without this, images are seperated by whitespaces that behave like links. If the images need some space between them, adding some right or left margin as in the fiddle would be a solution.
Also, though the .block class name is no longer appropriate, I left it to stay consistent with the OP.
The modified CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
font-size: 0;
}
.block img {
height: 100%;
margin-right: 1%;
}
I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>