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.
Related
I have looked at the already asked questions and tried multiple solutions but nothing seems to be working for me. I have a div, with multiple div's inside of it, and I cannot get it to center in the middle of the page on resize
This is the parent div which contains multiple others
<div id="showme" class="newmodal" style="position: absolute; z-index: 1000;
max-width: 561px; left: 700px; top: 263px; display: none;">
This is the css for the div
.newmodal {
position: fixed;
margin: 0 auto;
max-width: 900px; /* our page width */
min-width: 500px;
width: 50%;
}
Sorry if I am being really stupid, very new to this. I have tried removing the left and top inline styles but nothing is working.
EDIT
I forgot to mention that this div is being hidden and unhidden using a button so I am not sure if that changes any of the current answers.
.newmodal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
max-width: 900px;
/* our page width */
min-width: 500px;
background: #222;
}
<div id="showme" class="newmodal">Some content</div>
It will center div vertically and horizontally.
You need to close your div tag. Why use width,max-width,min-width? Try the following code:
.newmodal {
background: red;
max-width: 200px;
margin: 0 auto;
height: 50px;
}
<div id="showme" class="newmodal"></div>
Try this:
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.newmodal {
border: 1px solid black;
display: block;
margin: 1.5em auto;
text-align:center;
padding:7px;
width: 50%;
background:#222;
color:#fff;
}
<div id="container">
<div class="newmodal">Some content here</div>
</div>
I created this CodePen that you can use to look at. Try using something like this:
.newmodal {
position: relative;
margin: 0 auto;
max-width: 900px;
min-width: 500px;
background-color: red;
}
Remove all of your styling from your HTML because you had some contradicting styles going on between the CSS and HTML you provided.
<div id="showme" class="newmodal">
<!--Some added data-->
</div>
Remember also that in order for margin: 0 auto; to work, the element must be block style, it can't float, it can't be fixed or absolute, and a width that is not auto. Found this information from this post: What, exactly, is needed for "margin: 0 auto;" to work?
Edit:
So if you are using jQuery and you want to make it appear and disappear, you can do something like this:
$(".newmodal div").on("click", function() {
if ($(this).css('display') == 'block') {
$(this).hide();
}
else {
$(this).show();
}
});
The only problem with this is making the element reappear. But I'm not sure what your entire project looks like but I hope this points you in the right direction.
1st the css part of "margin: 0 auto" and "width 50%" should be for the child div and not the parent.
2nd you can make your life much easier my moving to flexbox which does all that automatically.
See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
website: www.vocabularybuilder.co
I want the logo and the navigation to be clickable, it used to work but i did something and now it doesn't :/
Add z-index: 1 and position: relative for this class.
.site-header__logo {
text-align: center;
margin: auto !important;
max-width: 400px;
font-size: 1.85714em;
top: 0;
height: 90px;
display: table;
z-index: 1;
position: relative;
}
Try adding this to your css:
.nav-bar {
pointer-events:none;
}
// for the 2 links
li a {
pointer-events: auto;
}
Hope it'll work. This was already answered here Click through a DIV to underlying elements. ctto
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 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.
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