In css styling margin:0px auto; is centers the element in x-axis.
But I want center the same in y-axis.
^
|
|
<----E---->
|
|
v
Thanks in advance
Looks like you need drumroll FLEXBOX!!! Set the following styles on your parent element while you keep the child element with an explicitly defined width and margin: 0 auto;
.parent {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
check it out: http://jsfiddle.net/6j5Ah/
Hope you're using a sweet new browser cause this is NOT going to work in your grandpa's browser (http://caniuse.com/#search=flexbox).
Read more than I could ever hope to know at HTML5rocks.com: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
Also keep in mind that the spec has changed a bit around flexbox and there's a new syntax for it. The one I've posted is the old (2009) syntax since it has wider support. That will be changing as browsers move into the future. You can find more information about the differences on CSS Tricks-- http://css-tricks.com/old-flexbox-and-new-flexbox/
<div id = "centerDiv"></div>
CSS
#centerDiv
{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
This code helps to center horizontally.
EDITED:
Try this link. I think this is what you want :-)
if you know the box's size, you can use the position, like this:
HTML
<div class="center"></div>
CSS
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: height /2;
margin-left: width / 2;
width: ... px;
height: ...px;
}
Another method,please click here.
Related
I am currently making the footer of my project, and somehow every element I code seems to move every time I (or the user) resizes the window.
I have tried -
margin: 0 auto;
position: relative; float: left;
EDIT:
Code:
.pdiv{
/* div might be helpful? */
}
.footer {
position: relative;
left: 300px;
}
Try to use flexbox in your footer,
footer {
display: flex;
justify-content: center; // or flex-end, flex-start of your choice how you want them to look
align-items: center; // or same as above
}
Make yourself a favor and please use flexbox instead of floats, please, floats are not meant to do layout, this is more historical as before flexbox, there was no "universal" nor "adapted" way to compose clear layouts (dont start me on table's, plz).
This may help you:
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ (Float to Flexbox migration)
https://flexboxfroggy.com - A game to learn Flexbox
I am currently building a website with weblflow but run into a problem that someone here might be able to help me with. The is an issue I have for multiple projects, so I would really appreciate someone's help.
Basically, if you have an image full screen size (set as background image, 100vw and 100vh), and then want to put headings/labels on top of that image pointing to specific sections in that image, how do I get these headings/labels always move with the image when someone would resize the browser?
As for now I used absolute positioning for the headings/labels and used % margins to position them where I want them to point to on the image. The image itself I have set to position relative. However, with that solution the headings/labels never exactly continue to point to the same spot on the image when resizing the browser.
I think the main issue is that when someone only changes the browser's width, the image gets (for example) smaller bc it keeps it's ratio. Vertically the headings/labels don't move bc the height was unchanged, it's just the browser's width that was changed. So horizontally it's still fine but vertically the headings are off now since the image got smaller due to resizing the browser's width. So I guess I do know why it's not working but I don't know how to fix this. If someone has a solution for this, please let me know.
As an example: if you open this page: http://nestin.bold-themes.com/classy/ and scroll down to the section ‘True value is always inside’, there is an image with 5 numbered labels, no matter how you resize the browser, these labels/numbers stay in the same spot of the image. I see this quite often on websites. How was this achieved?
Would appreciate any help!
You create a parent wrapper, put inside the image and all the divs.
the parent is relateive and the divs are absolute.
here's a small demo.
* {
box-sizing: border-box;
margin: 0;
}
img {
max-width: 100%;
display: block;
width: 100%;
}
.parent {
position: relative;
}
.parent .box {
position: absolute;
width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
border-radius: 50%;
background-color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.parent .box.window {
top: 0;
left: 39%;
}
.parent .box.light {
top: 16%;
left: 46%;
}
.parent .box.pool {
top: 90%;
left: 50%;
}
.parent .box.plant {
top: 55%;
left: 3%;
}
<div class="parent">
<div class="box plant">1</div>
<div class="box window">2</div>
<div class="box light">3</div>
<div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""/>
</div>
https://codepen.io/ShadiMouma/pen/BaKYyYX?editors=1100
You can achieve this with percentage positioning. For example,
In the parent div
position: relative;
In the child div
position: absolute;
top: 50%;
left: 30%;
Now the child div will always position itself 50% from the top and 30% from the left of the parent div. It does not matter what size the parent div is. I suggest you take a parent div and put the image and texts inside it.
Your example website also uses this technique.
check their code here
Another technique would be using HTML canvas. But for something simple like this, HTML canvas would be overkill.
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?
I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).
So how do i make these divs go into another row? and not try to squeeze together
<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>
I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?
I would probably start with something like this:
.top {
width: 500px;
overflow: hidden;
}
.top div {
display: inline;
float: left;
width: 150px;
height: 150px;
}
Here's a solution that might help (used it in my example, just customized to fit your example)
.top {
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.top div {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 10px;
width: 47%; /* Not needed, but in my case I needed 2 columns */
}
Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;