All geek questions in one place

Creating a div a little out of center

I usually did this by setting the margin to auto, using the position: absolute or through registration, but, unfortunately, this will not work in this case. I need the div to be about 15 pixels out of center horizontally from the page. Complex bit - it needs to be scaled correctly when the page expands. It seems to me that I will need to perform this horizontal adjustment based on the center point, and not on the left side. How could I achieve this? Thanks.

+4
source share
6 answers

Use a div container that is centered, then its contents you can give margin-left:npx - like this:

HTML

 <div id="container"> <span id="green">&nbsp;</span><br /> <span id="blue">&nbsp;</span> </div>

CSS

 #container{width:100px; margin:auto auto; background-color:red;} #container span{display:block; width:100%; } #green{background-color:green; margin-left:10px;} #blue{background-color:blue; margin-left:-10px;}

See an example encoded here - http://jsfiddle.net/Xpk8A/1/

+3
source

provide a shell with: margin: auto; position: absolute;

inside the wrapper, place the div: position: relative; left: -15px; (or what you want)

An example page will help.

0
source

You can fully position your div and set the left attribute to 50%. Then set margin-left to 50% + 5px (whatever that is). However, this will only work if you have a fixed width set. For example, if the field is 200 pixels wide, margin-left will be -115px .

0
source

The key is to set width:100% and a fixed margin , as you can see in my example below

 <style> div { background-color:red; height:100px; margin:0 auto; width:100%; margin-left:15px; } </style> <div></div>
0
source 
 <html> <body> <div class="centered"> <div class="offcenter"> </div> </div> </body> </html>

css will be:

 .centered { margin: 0 auto; width:300px; height:200px; background-color:red; } .offcenter { background-color:blue; width:285px; height:inherit; float:right; }

http://jsfiddle.net/evbbq/

0
source

You can use display:inline-block for center DIV and then pass margin to it.

Like this:

 .Parent{text-align:center;} .Child{ display:inline-block; text-align:left; width:200px; height:150px; background:red; margin-left:15px; }

Check out this script http://jsfiddle.net/Xpk8A/2/

Remove margin-left:15px , then click the Run button in the script to see the different ones.

0
source

Source: https://habr.com/ru/post/1379508/

More articles:


All Articles