Tôi đang cố định vị trí một lượng pixel x x ở bên phải của giữa trang. Do đó, div sẽ liên quan đến trung tâm.Bù đắp div từ trung tâm
Cho đến nay, tôi đã thử một cái gì đó ngu ngốc như
margin:0 auto;
margin-left:20px;
Nhưng bạn không cần phải kiểm tra rằng trong một trình duyệt để biết nó sẽ không hoạt động.
Cảm ơn trước vì đã được trợ giúp.
Tôi muốn thử sử dụng hai DIV, một bên khác. Một cái gì đó như thế này:
<div class="outer">
<div class="inner">Hello, world!</div>
</div>
.outer {
width: 1px; /* Or zero, or something very small */
margin: auto;
overflow: visible;
background: red; /* A color just for debug */
}
.inner {
margin-left: 20px;
background: yellow; /* A color just for debug */
width: 100px; /* Depending on the desired effect, width might be needed */
}
Xem this example live at jsfiddle.
Các bên ngoài div sẽ được theo chiều ngang trung theo câu hỏi này/câu trả lời: How to horizontally center a <div> in another <div>?
Sau đó, diff bên trong chỉ là chuyển 20 pixel ở bên phải, sử dụng một lề.
Lưu ý rằng, nếu bạn rời khỏi width là auto, chiều rộng sẽ bằng 0 và có thể không phải là thứ bạn muốn.
Bạn có thể tập trung div (với margin: auto) và di chuyển nội dung (trong div khác) X pixel bên phải với:
margin-right:-20px
Hoặc chỉ cần đảm div kèm theo của bạn 40 pixel lâu hơn và gắn kết của bạn văn bản ở bên phải
Nếu bạn biết chiều rộng của phần tử div bạn muốn xác định vị trí tương đối so với trung tâm, sau đó bạn có thể làm một cái gì đó như thế này:
http://jsfiddle.net/UnsungHero97/Fg9n6/
HTML
<div id="box">off center</div>
<div id="box2">center</div>
CSS
#box {
width: 300px;
height: 100px;
border: 1px solid magenta;
margin: 0 auto;
text-align: center;
line-height: 100px;
position: relative;
left: 20px;
}
#box2 {
width: 300px;
height: 100px;
border: 1px solid skyblue;
margin: 0 auto;
text-align: center;
line-height: 100px;
}
quả
Sử dụng mã này:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
#outer {
position:relative;
width:300px;
height:100px;
background-color:#000000;
}
#inner {
position:absolute;
left:50%;
width:100px;
height:100px;
margin-left:-30px; /*Basic Margin Left-Half of Width=20px-50px=-30px*/
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
Kết quả:
<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>
này làm việc cho tất cả các bootstraps, html5 (và ngay cả trong MediaWiki địa ngục) .Công Bí quyết là "POSITION: RELATIVE"
Bạn có thể làm điều tương tự như CSS.
<code>
.whateva {
position:relative;
left:20px;
text-align:center;
}
</code>
Cảm ơn một gói, hoạt động tuyệt vời. –
cảm ơn +1. điều này đã giúp tôi giải quyết vấn đề thực sự khi chuẩn hóa vị trí bong bóng thông tin bật lên trên các độ phân giải màn hình khác nhau. –
Lưu ý rằng thao tác này chỉ hoạt động nếu bạn cần di chuyển nội dung sang phải, do đó nó sẽ không hoạt động nếu bạn muốn di chuyển sang bên trái. Bạn có thể khắc phục điều đó bằng cách sử dụng lề trái âm, nhưng điều đó sẽ làm hỏng cuộn. – Vallentin