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%);
}
Related
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>
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.
I'd like to place my H2 text vertically & horizontally center over my image.
Can someone explain how I do this?
https://jsfiddle.net/q3odxfmb/
<div class="content">
<img src="http://placehold.it/940x510">
<h2>
TEXT WILL GO HERE
</h2>
</div>
fiddlehttps://jsfiddle.net/q3odxfmb/1/
img {
max-width: 100%;
vertical-align: middle;
}
#container {
position: relative;
}
#text-outer {
height: 100%;
margin-left: 12.5%;
position: absolute;
top: 0;
width: 75%;
}
#text-inner {
color: #fff;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
this question already asked so many times please refer this link
thank you all
Text Above Image CSS Z-Index Not Working
It's quite easy. Simply set css to:
.h2 {
line-height:/*height of your image*/
}
Then set the margin in the div to auto:
div {
background-url: <image-link>;
margin:auto
}
This should center it perfectly.
You would have to have a small margin set for this method.
Here is a JSBin with an easy method, too:
https://jsbin.com/vawowebolu/edit?html,css,js,output
set the text as a background over a div, and center the text over the div.
HTML:
<div class="content">
<h2 id="mytext">
TEXT WILL GO HERE
</h2>
</div>
CSS:
div {
background: url("<image-link>")
}
#mytext {
line-height: 510px;
vertical-align:middle;
text-align: center;
}
I'm trying to apply absolute position on an error label elemennt, which is inside an input field that is also positioned absolutely. The problem is that auto-width on the error element won't apply correctly, and will break after the first word. Why is that happening? If I use position right instead of left, it seems to work fine. Here's a jsfiddle link: http://jsfiddle.net/u793ata5/
Here's the HTML code:
<div id="outside">
<div id="inside">
<label class="error">Show this error on the side</label>
</div>
</div>
And CSS:
#outside {
position: relative;
width: 250px;
height: 250px;
}
#inside {
position: absolute;
top: 30%;
height: 30px;
left: 40%;
width: 80%;
}
.error {
width: auto;
position: absolute;
left: 90%;
top: 10%;
background-color: red;
color: white;
}
Why so many absolutely positioned elements? Maybe I'm not understanding what you want the layout to look like--and maybe you could clarify--but this modified fiddle looks more reasonable to me.
http://jsfiddle.net/u793ata5/3/
.error {
background-color: red;
display: block;
margin-left: 50%;
color: white;
}
I try not to use position: absolute unless I...uh absolutely have to.
You're putting it's position at 90% from the left. This means it only has 10% of the parent width to place text before wrapping. Try using
float: right;
instead of
left: 90%;
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>