关于的垂直居中的问题_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

关于的垂直居中的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

居中分为垂直居中和水平居中，这里因为水平居中比较简单就不过多说了，然后垂直居中呢又分为以下几种情况种情况：

1、单行居中

　　这个也简单直接line-height为容器的高度就行了。

2、多行居中

　　和上面的单行居中差不多，只是line-height的值发生了变化，用容器高度除以行数，得到的结果就是line-height的值。

3、DIV垂直居中。这个也分为两种情况

　　3.1、DIV知道高度的情况，这里就需要用到定位，下面是具体代码。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        body{            width: 100%;            height: 100%;        }        div{            width: 100%;            height: 400px;            position: absolute;            top: 50%;            left: 0;            margin-top: -200px;            background: red;        }        .box{            width: 100%;            height: 380px;            margin-top: -180px;            background: black;        }    </style></head><body>    <div>        <div class="box"></div>    </div></body></html>

　　　　但是这么做有一个地方不好，当我们的浏览器的高度缩小到一定的大小的时候，那么DIV就有一份看不见了，而且滚动条也不能滑动上去。这个问题，我还没找到具体的解决方法，如果哪位大神知道怎么解决，请评论告知下，不胜感谢！

　　3.2、DIV不知道高度的情况下，下面是具体代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        body{            margin: 0;            padding: 0;        }        html,body{            width:100%;             height:100%;         }        .main{            text-align:center;             width:100%;             height:100%;             display:table;        }        .box{            display:table-cell;             vertical-align:middle;        }    </style>    <!--[if lte ie 7]>        <style>            .main{                position:absolute;                 top:50%;                 height:auto;            }            .box{                position:relative;                 top:-50%;             }        </style>    <![endif]--></head><body>    <div class="main">        <div class="box">            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid harum cupiditate mollitia placeat quam repellendus, expedita magni vitae officiis eaque dolor quis architecto illum, iure atque cum. Iusto, enim, animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem neque optio suscipit minus maiores id magnam porro, harum maxime! Maiores eum tempore quod quas rem, totam, vitae incidunt sed!        </div>    </div></body></html>

好了，这些差不多就是我遇到过得所有关于垂直居中的问题了，先写到这里，后面遇到了再总结。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract