您如何轻松地水平居中 div 使用CSS？ [重复]

本文翻译自：How do you easily horizontally center a

using CSS? [duplicate]

This question already has an answer here: 这个问题已经在这里有了答案：

101 answers 101个答案

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. 我正在尝试在页面上将<div>块元素水平居中并将其设置为最小宽度。 What is the simplest way to do this? 最简单的方法是什么？ I want the <div> element to be inline with rest of my page. 我希望<div>元素与页面的其余部分内联。 I'll try to draw an example: 我将尝试举一个例子：

page text page text page text page text
page text page text page text page text-------| div |-------
page text page text page text page text
page text page text page text page text

#1楼

参考：

#2楼

In the case of a non-fixed width div (ie you don't know how much space the div will occupy). 对于非固定宽度的 div（即，您不知道div将占用多少空间）。

 #wrapper { background-color: green; /* for visualization purposes */ text-align: center; } #yourdiv { background-color: red; /* for visualization purposes */ display: inline-block; }

 <div id="wrapper"> <div id="yourdiv">Your text</div> </div>

Keep in mind that the width of #yourdiv is dynamic -> it will grow and shrink to accommodate the text inside it. 请记住， #yourdiv的宽度是动态的->它会增长和收缩以适应其中的文本。

You can check browser compatibility on 您可以在上检查浏览器的兼容性

#3楼

you can use the position:relative; 您可以使用position：relative; and then set the left and the top values: 然后设置左值和上值：

.cenverDiv{position:relative;left:30%;top:0px;
}

#4楼

you can use margin: 0 auto on your css instead of margin-left: auto; margin-right: auto; 您可以在CSS上使用margin: 0 auto而不是margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;

#5楼

 .center { height: 20px; background-color: blue; } .center>div { margin: auto; background-color: green; width: 200px; }

 <div class="center"> <div>You text</div> </div>

#6楼

Using jQuery: 使用jQuery：

$(document).ready(function() {$(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6$(".myElement_container_new").css({// for IE6"display" : "block","position" : "relative","margin" : "0","padding" : "0","border" : "none","background-color" : "transparent","clear" : "both","text-align" : "center"});$(".myElement").css({"display" : "block","position" : "relative","max-width" : "75%", // for example"margin-left" : "auto","margin-right" : "auto","clear" : "both","text-align" : "left"});
});

or, if you want to center every element with class ".myElement": 或者，如果您想将每个元素都以“ .myElement”类为中心：

$(document).ready(function() {$(".myElement").each(function() {$(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6$(".myElement_container_new").css({// for IE6"display" : "block","position" : "relative","margin" : "0","padding" : "0","border" : "none","background-color" : "transparent","clear" : "both","text-align" : "center"});$(this).css({"display" : "block","position" : "relative","max-width" : "75%","margin-left" : "auto","margin-right" : "auto","clear" : "both","text-align" : "left"});});
});

您如何轻松地水平居中 div 使用CSS？ [重复]相关推荐

外边距的典型应用-让块级盒子水平居中(HTML、CSS)
外边距的典型应用-让块级盒子水平居中(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><m ...
html div 居中心,div在屏幕中水平居中 div内容居中
网页HTML中布局DIV如何在任何不同浏览器于任何客户端移动或PC上都是水平居中的.同时如何让div内容居中(文本水平居中). 一.div屏幕中水平居中让DIV水平居中关键CSS代码:margin: ...
html九宫图div满屏居中,九宫格+DIV水平居中+div垂直居中+div内部文本居中+div内div居中...
有很多网页初手,对网页的 DIV+CSS布局不很精通,我现将常用的几个东西制作在一起, 以方便您使用. 学会了这一个,就可以对 html的盒子模型有更深的了解九宫格 DIV水平居中+div垂直居中 ...
html的水平居中怎么设置,css水平居中怎么设置？两种css水平居中的设置方法
css样式能够实现水平居中,那么css水平居中怎么设置呢?本篇文章将给大家来分享关于css设置水平居中的实现方法. css中可以设置行内元素的水平居中和设置块级元素的水平居中,对于行内元素和块级元素不 ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
div css标记,前端初学者必学的div加css标签
原标题:前端初学者必学的div加css标签今天给大家分享前端初学者必须要学习的标签,这些标签你都会了吗? DIV加css标签页头:header 登录条:loginBar 标志:logo 侧栏:si ...
设置DIV半透明CSS代码：
设置DIV半透明CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明: 1.filter:对win IE设置半透 ...
css怎样定义div大小,css如何设置div大小
在css中,可以使用width属性和height属性来设置div大小,只需要给div元素设置"width:值"和"height:值"样式即可.width属性定义 ...
DIV实现CSS 的placeholder效果
placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

您如何轻松地水平居中 div 使用CSS？ [重复]

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

您如何轻松地水平居中 div 使用CSS？ [重复]相关推荐

最新文章

热门文章