how to make div centered in css

Today you need to center the text vertically, that is, the line is vertically centered, and multiple lines are vertically centered.The effect is as followsImplementation code (colleague provided)DOCTYPE HTML>HTML>HeadLang= "en"> MetaCharSet= "UTF-8"> title>title> style>. Listdiv{Display:Flex;width:300px;Height:60px;padding:10px;background:#ccc;Margin-bottom:10px; }. Listdivleft{Flex:1;Height:60px;Overflow:Hidden; }. Listdivleft

Reference Link: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question/69214815.htmlFor the horizontal center of the text, the text-align:center can be solved, the vertical center is more complex, the classification of the discussion:Single-line text, if there is only one line of text in a container, it is relatively simple to center it, we only need to set its actual height and the height of the row line-height equal . Such as:div{height:100px;line-height:1

Scene: The parent element is highly fixed and how the text in it is centered vertically. Method One: Code: Result diagram: Key styles: The ① parent element (here is the DIV) setting and the highly consistent line-height (here is 200px)---defined by the subsequent vertical-align, this is to set the DIV's baseline ② child element (here is span) set the appropriate line-height, and set Display:in

, and the effect is exactly the form. Disadvantages: Invalid under IE Iv. This method inserts a div outside the content element. Set this div height:50%; Margin-bottom:-contentheight;. The content clears the float and appears in the middle. Content here #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;} Advantages: Applies to all browsers Co

Position:absolute; Top:50%;left:50%;3. setting element MARGIN-TOP:-{HEIGHT}/2;MARGIN-LEFT:-{WIDTH}/2;Center of floating Elementfor floating block elements (such as float:left), you need to use some properties such as position to achieve horizontal vertical centering of the elements, the basic steps are: 1. The outer layer of the element sets a div and sets its style: Float:left;overflow:hidden; Display:inlineblock;2. Set the outer

About CSS is completely centered on the article, online has been a lot. Here is the main record of ideas, convenient memory, and finally attach all the reference links.1 Horizontal Center1 inside is an inline element, then we can set it directly on the parent element, Text-align:center.2 has multiple inline elements, lined up to achieve horizontal centering.HTML code:Divclass= "Container">

The previous blog is about setting Div to center, and sharing the display of how to center the table today. As for the principle of centering is not to say, you can look at my last blog, this time did not use window two events, but the use of a function called expression. This function is now supported by most browsers. When I wrote a blog, I was wondering if I could assign the values to the left and top properties of the

Article Introduction: Beginners Use DIV+CSS structure to write a few misunderstandings of the Web page. The creation of Web pages for the use of Div and CSS structure to write static page is now very mature, but many new entrants to the use of Div and

content to center vertically. Just set the content to center horizontally (v) display:table-cell css has a property vertical-align for vertical centering, but only When the parent element is TD or TH, this vertical-align property will take effect, for other block-level elements, such as div, p, and so on, by default, the Vertical-align property is not supported. The display type of the block-level eleme

In line: Text-align:center;Fixed width block: margin:xpx auto;Variable width BLOCK:1.2.display:inline then treated as inline elements (there is a problem: Some features are missing, such as setting the length value)3. By setting float to the parent element and then setting position:relative and left:50% for the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.First, the parent Div floats, and i

This refers to the horizontal center of course is to say through the CSS to automatically control, and not to say after the calculation, set a position to refer to the settlement.In general, there are three ways to achieve this:In the implementation, we define two nouns to facilitate the following explanation: out--contains the container that needs to be centered, in--the element that needs to be

10 common reasons why CSS is not valid in a DIV+CSS page layout We learn div+css page layout knowledge, but brother even validation sometimes difficult to operate, but with it you can see the layout of errors caused by the design, validation program throws a lot of errors an

First of all, the ionic under the style settings, ionic under the function to divide the style scope into modules, modules within the module corresponding to the style of the parent module, and then the global body ... Inherit the * * * *1, about CSS Adaptive Height Vertical Center text, non-locating class (position will affect performance, can be gifted) method to achieve:Analysis: Use the Vertical-align method to center the element vertically, but o

Example:DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">HTMLxmlns= "http://www.w3.org/1999/xhtml">Head>Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />title>CSS implements a child layer horizontally vertically centered in the parent layertitle>styletype= "Text/css">#paren

In the production of CSS navigation, there is a problem, the previous navigation is left and right symmetry, as long as the use of margin:0 auto, you can achieve the center. But this time the picture template navigation of the left width, the right narrow, if all as the background to layout, a glance will feel that the navigation is not in the middle.In order to have its visual logo and the white area of the navigation menu

DOCTYPE HTML>HTMLxmlns= "http://www.w3.org/1999/xhtml"> Head> title>Multi-line text for vertical centeringtitle> Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> styletype= "Text/css">Div#wrap{Display:Table;Border:1px solid #FF0099;Background-color:#FFCCFF;width:380px;Height:200px;_position:relative;Overflow:Hidden; }Div#subwrap{vertical-al

Description: The style setting is primarily for the parent element of the picture, not the picture element itself.CSS code [style of picture parent Point]:style>. Box{ /*Vertical Centering method for non-ie mainstream browser recognition*/Display:Table-cell;vertical-align:Middle; /*Set Horizontal Center*/text-align:Center; /*hack for IE*/*display:Block;*font-size:175px;/*About the height of the 0.873,200*0.873 is about 175*/*font-family:Arial;/*prevent non-utf-8 caused by hack failure p

How to make a div float on top of another Div, Div floating div It's just the demo. DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />stylety

One-line picture is centered vertically with text, which is to add vertical-align:middle to the style attribute in the IMG tag If you do not set, a single line of pictures and text side-by, the text defaults to the bottom center. Note the following code for the IMG tag, without setting any of the style attributes, The run effect is as follows, where the Div float:left, Clear:both, and so on, just for the

Chapter 1: Be aware1.1 Div + CSS is not accurateI think most of my students who come to "CSS Learning Network" aim at Div + CSS to learn about Div + CSS, the next step is to learn how t