I am having trouble centering these hidden images in there divs. I want the displayed image centred and the thumbnails underneath?
here is the fiddle: http://jsfiddle.net/rabelais/mj7ba/1/
.displayed-image img {
height: 200px;
position: absolute;
top: 10px;
text-align: centre;
}
.thumbnails {
position: absolute;
top: 250px;
text-align: centre;
}
First: The text-align property should be applied to a block container and then it will centre that container's inline content. You should never apply it to an image, since an image is usually an inline element and can never be a container.
Second: Absolutely positioning an element takes it out of normal flow, so it can't be aligned normally.
Third: Most computer languages use American English, not standard English. Centre is spelt center.
You need something more along the lines of:
.displayed-image {
text-align: center;
}
.displayed-image img {
height: 200px;
}
.thumbnails {
text-align: center;
}
.thumbnails img {
height: 70px;
border: 1px solid;
}
Here is working example.
Problem was with containers.
Js fiddle
left. It will work.
.displayed-image img {
height: 200px;
position: absolute;
top: 10px;
text-align: centre;
margin-left:200px;
}
.thumbnails {
position: absolute;
top: 250px;
text-align: centre;
margin-left:200px;
}
If you want any other help just let me know.
Related
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'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 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 want to center a paragraph which is positioned absolute inside another div positioned relative. The problem is since this is absolute I can't use text-align: center! Also I want to center the paragraph both vertically and horizontally.. .
My HTML looks like this
<div class="top">
<p class="same">Django</p>
</div>
CSS
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
}
I want the paragraph text 'Django' to be in the center both vertically and horizontally
(http://i.imgur.com/MNcaBYs.jpg)
You don't need absolute positioning at all to achieve what you want :
.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }
You can force paragraphs to have inline layout and then center them horizontally using text-align: center. To center them vertically just add line-height to paragraph equal to container's height (it is not a problem here as you container's height is fixed). If you don't want to set display: inline explicitly, you can just use span instead of p.
JSFiddle
You can achieve that in following way.
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
height: 50%; /* This is mandatory i.e. this should not be auto */
text-align: center;
width: 70%; /*This is not mandatory*/
/* The code below is required to horizontally and vertically center the <p> element */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you