Centering HTML elements larger than their parents
Centering HTML elements larger than their parents
It's not a common problem, but I've run into it a few times. How do you center an element when it is larger than it's parent? I mean really center it, where content overflows both the left and right borders of the parent element equally.
The default behaviour in HTML and CSS (using margin:0px auto;
) is to line up the left edges of the child and parent elements while all the overflowing happens on the right side. That's not centered at all; it's most definitely offset to the right, which is painfully obvious if what you really wanted was to have the center of the child element line up with the center of the parent element, regardless of size.
This is the child element
which should be centered
IMHO, the ideal behaviour would look something like this image:
So I was working on a project that required the behaviour I was expecting, rather than what HTML and CSS normally provides with a simple margin:0px auto;
declaration. It also had to fit a few other strict criteria which ruled out several other "solutions" you can find out there.
- Has to work for children of varying widths, not just those of specified pixel dimensions.
- No absolute positioning or floating
- No JavaScript - The effect needed to work whether or not JavaScript was enabled or disabled.
Item #1 rules out the simplest solution which merely applies a negative left margin to the child element. If we know how wide the parent is, and how wide the child is, then we just need to apply a negative left margin that is equal to the difference of the child element and parent element widths, divided by two. If we don't know the width of the child element, setting a specific left margin is just going to make it look weird for all widths except one.
Item #2 rules out positioning solutions that use combinations of percentage positioning to achieve a centered child element. But because this removes the element from the flow of the document, the bottom of the parent element will cinch up and the content below it will collide with the content of the child element. I needed the parent element to remain tall enough to contain the height of the entire child element; it's only the width I was concerned about here.
Finally, Item #3 rules out JavaScript solutions that test the parent and child elements after the page has loaded and determines what negative margins or positioning values to set. This works every time, except if JavaScript is disabled. Granted that isn't often these days for visual browsers, but I still did not want to depend on script for something that was clearly just a styling issue.
Eventually I happened upon a solution that fit all three criteria above, and although it came with a few issues of its own, I decided I could live with them. You may know of a different or even better way to accomplish this, but here's what I came up with.
First, instead of setting a width or margins for the parent element wrt the page context, let it expand to the full width. Then relatively position it with a value of right:50%;
.
This is the child element
which should be centered
This puts the center of the parent element directly on the left border of the page centering context. Since the parent element is now the same width as the page centering context, that means its right border is exactly in the center of the page centering context! We exploit this fact as we move on.
What we want to do now is to move the center of the child element so it aligns with the right border of the parent element. In order to do this, the child element needs to be centered within the parent element so the center of the child element is also sitting on the left border of the page centering context.
Okay, leap-of-faith here: Even if it doesn't look like it's centered, as long as you apply the correct centering styles, the child element will behave as if it were centered when you apply the negative margins we'll need in the next step.
But we have a problem. How do you center a block if you need to specify both margin:0px auto;
for centering and also a negative margin-right
? Doing this will override one of the auto
values of the margin and the child element will no longer be centered. Is there another way to center a block?
YES! We can use our old friend text-align:center;
to center inline elements within the parent block. To make the style applicable to the block child element we are using, we'll turn it into a hybrid usingdisplay:inline-block;
. This change introduces a restriction though, which prevents us from having other inline content abutting either side of the child element. Otherwise the text-align
will not center our block properly. The child element needs to be the only inline element on the "line". So we'll have to remove our little "This is the parent element" note to move forward.
This is the child element
which should be centered
Like I mentioned before, it doesn't look centered, but its calculated position will behave as if it is when we apply the final step, the negative margin-right
. With the parent block's left border resting in the center of the page centering context, we now know the distance between where the center of the child element is now, and where we need it to be: exactly half the width of the parent element.
This being said, you'd think a negative margin-right
of 50% on the child element would move the center point nicely, but in fact it doesn't. Actually it only appears to move the block 25% of the width of the parent element.
This is the child element
which should be centered
This is indeed odd, and if someone knows why it behaves this way, I would be grateful to hear it explained. In any case, this oddity is no big deal to overcome; just specify a negative margin-right
of 100% instead:
This is the child element
which should be centered
Centered! Now the only problem we're left with is the parent block; we don't want to see it. Hiding the parent block is simple, we'll just remove the border and make sure its background is transparent. We can't use display:none;
or visibility:hidden;
here because that would also affect the visibility of the child element.
This is the child element
which should be centered
And the code: (Important styles are highlighted)
div#context {
border:1px solid blue;
width:400px;
margin:0px auto;
}
div#context div {
position:relative;
right:50%;
text-align:center;
}
div#context div p {
border:1px solid green;
width:450px;
height:50px;
display:inline-block;
margin-right:-100%;
}
<div id="context">
Page centering context
<div>
<p>
This is the child element<br />
which should be centered
</p>
</div>
</div>
We're done! The great benefit of this system, despite the restrictions, is that it is uniquely dynamic. You can change the width of the child element to whatever you like and it will remain centered wrt the page centering context, either smaller or larger.
This is the child element
which should be centered
This is the child element
which should be centered
Things to remember about this system:
- The parent element can't contain any inline content that abuts the child
inline-block
. - In fact, since the parent element is offset so, you probably can't use it for anything other than an empty non-visible container block for the child element.
- You can use
left
andmargin-left
to accomplish the same thing, although you run the risk of generating a horizontal scrollbar for the page. - If the child element is an image, you don't need the
display:inline-block;
style, as images are already inline-blocks. - IE7 and earlier can't inderstand the
display:inline-block;
style unless you apply it to an element that is inline by default (span, strong, em...). If you require compatibility for these browsers, use a<span>
element for your child block.
http://www.greywyvern.com/?post=323
Centering HTML elements larger than their parents的更多相关文章
- Designing CSS Layouts With Flexbox Is As Easy As Pie
This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Sm ...
- uva 10723
10723 - Cyborg Genes Time limit: 3.000 seconds Problem F Cyborg Genes Time Limit 1 Second Septembe ...
- [LeetCode#84]Largest Rectangle in Histogram
Problem: Given n non-negative integers representing the histogram's bar height where the width of ea ...
- The algorithm learning of sort which include Bubblesort,Insertsort,Quicksort and Mergesort.
Notice : these algorithms achieved by Java. So,let's going to it. firstly, what is Bubblesort? why w ...
- way.js
(function (root, factory) { if (typeof define === "function" && define.amd) { defi ...
- phpquery 学习笔记
phpQuery是一个基于PHP的服务端开源项目,它可以让PHP开发人员轻松处理DOM文档内容,比如获取某新闻网站的头条信息.更有意思的是,它采用了jQuery的思想,你可以像使用jQuery一样处理 ...
- 10723 Cyborg Genes (LCS + 记忆化搜索)
Problem F Cyborg Genes Time Limit 1 Second September 11, 2132. This is the day that marks the beginn ...
- Leetcode: Max Sum of Rectangle No Larger Than K
Given a non-empty 2D matrix matrix and an integer k, find the max sum of a rectangle in the matrix s ...
- jsoup的elements类
jsoup的Elements类 一.简介 该类是位于select包下,直接继承自Object,所有实现的接口有Cloneable, Iterable<Element>, Collectio ...
随机推荐
- ASP.NET-----Repeater数据控件的用法总结(转)
一.Repeater控件的用法流程及实例: 1.首先建立一个网站,新建一个网页index.aspx. 2.添加或者建立APP_Data数据文件,然后将用到的数据库文件放到APP_Data文件夹中. 3 ...
- 【好文要转】Python:模拟登录以获取新浪微博OAuth的code参数值
[转自]http://www.tuicool.com/articles/zAz6zi [原文]http://blog.segmentfault.com/hongfei/1190000000343851 ...
- 码农谷 求前N项之和
题目描述 有一分数序列:2/1.3/2.5/3.8/5.13/8.21/13.......求出这个数列的前N项之和,保留两位小数. 输入描述 N 输出描述 数列前N项和 样例 输入: 输出: 16.4 ...
- .NET使用ICSharpCode.SharpZipLib压缩/解压文件
SharpZipLib是国外开源加压解压库,可以方便的对文件进行加压/解压 1.下载ICSharpCode.SharpZipLib.dll,并复制到bin目录下 http://www.icsharpc ...
- 回到顶部js代码
function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用, ...
- ADO.NET中的Command详解
Command方法介绍 1.ExecuteNonQuery 对于Update.Insert.Delete执行并返回受影响行数 对于其他语句返回 -1 2.ExecuteScalar 执行查询.并返回结 ...
- jLink V8调试exynos 4412 u-boot的几点补充
/** ****************************************************************************** * @author Maox ...
- mysql给root开启远程访问权限,修改root密码
1.MySql-Server 出于安全方面考虑只允许本机(localhost, 127.0.0.1)来连接访问. 这对于 Web-Server 与 MySql-Server 都在同一台服务器上的网站架 ...
- Delphi初学者应小心的六大陷阱
Delphi初学者应小心的六大陷阱 作者:子夜编译 初学DelphiI的人,由于各种原因,对DelphiI中的许多概念不能很好的理解,并由此带来了许多的问题,或者是开发出的程序稳性不好 ...
- php网页,想弹出对话框, 消息框 简单代码
php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...