国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

CSS文字居中對齊學習

這篇具有很好參考價值的文章主要介紹了CSS文字居中對齊學習。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

CSS使用text-align屬性設(shè)置文字對齊方式;text-align:center,這樣就設(shè)置了文字居中對齊;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 水平居中</title>
		<style>
			.box {
				background: pink;
				text-align:center;
			}
                                                h1 {text-align:center;}
		</style>
	</head>
	<body>
                                <h1>我是標題</h1>
		<div class="box" style="width: 200px;height: 100px;border: 3px solid green;">AAB文本BCC</div>
		<div class="box" style="width: 100px;height: 50px;border: 3px solid green;">文字</div>
                                <p class="box">2021 年 01 月 01 號</p>
                                <a class="box" url="">aaaaa請單擊ccccccccc</p>

                                <table border="1">
                                    <tr>
                                      <td>A</td>
                                      <td>行1,列2</td>
                                    </tr>
                                    <tr>
                                      <td>行2,列1</td>
                                      <td>行2,列2</td>
                                    </tr>
                                </table>
	</body>

</html>

做一個html文檔,網(wǎng)頁元素包括:h1, 一個div,一個div,一個p(段落),一個鏈接(a),一個表格;

定義了CSS樣式類box,其中指定了背景色為pink,文字對齊為居中對齊;定義了h1元素的文字對齊方式為居中;

2個div引用了css類box;p和a也引用了樣式類box;

運行如下;

CSS文字居中對齊學習,web前端,css,前端,文字對齊

h1的文字居中對齊了;

2個div也是;

p元素沒有指定寬度的情況下默認占一整行,文字也居中對齊了;

a元素指定文字居中對齊看上去沒有意義,a元素的默認寬度自動調(diào)整為其中文字占據(jù)的寬度;

表格沒有指定單元格的文字對齊方式,<td>A</td> 這個單元格的文字寬度不夠單元格寬度,默認是居中對齊的;文章來源地址http://www.zghlxwxcb.cn/news/detail-700417.html

到了這里,關(guān)于CSS文字居中對齊學習的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權(quán),不承擔相關(guān)法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務器費用

相關(guān)文章

  • CSS實現(xiàn)文字垂直居中

    1、使用line-height屬性,將line-height設(shè)置與元素高度等高。 局限性:只適用于單行文本,局限性大。 代碼: 2.padding:設(shè)置相等的上下padding值。 局限性:有高度限制時不能垂直居中。 代碼: 3.絕對定位居中:top:0; bottom:0; left:0; right:0; margin:auto; 元素在過度受限情況下,將margi

    2023年04月15日
    瀏覽(20)
  • (css)文字與底部對齊

    (css)文字與底部對齊

    修改前: 修改后: 代碼: 解決參考:https://blog.csdn.net/qq_17335549/article/details/126866546

    2024年02月13日
    瀏覽(22)
  • CSS使兩個不同的div居中對齊的三種解決方案

    CSS使兩個不同的div居中對齊的三種解決方案

    在CSS中,有多種方法可以讓兩個不同的div居中對齊,包括相對定位和絕對定位。以下是兩種常見的方法: 方法一:使用Flexbox Flexbox是一個用于創(chuàng)建靈活布局的CSS3模塊。使用Flexbox,可以很容易地對元素進行居中對齊。 HTML: CSS: 方法二:使用CSS Grid CSS Grid是另一個用于創(chuàng)建二維

    2024年02月10日
    瀏覽(46)
  • css如何實現(xiàn)文字兩端對齊效果

    css如何實現(xiàn)文字兩端對齊效果

    想要實現(xiàn)文字兩端對齊效果,可以使用CSS的text-align屬性。設(shè)置text-align: justify;即可實現(xiàn)文字兩端對齊效果。 方法1 : 給元素設(shè)置?text-align: justify; text-align-last: justify;并且加上 text-justify: distribute-all-line; 目的是兼容ie瀏覽器 p{ ????????????width:?130px; ????????????te

    2024年02月01日
    瀏覽(93)
  • 【移動端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )

    【移動端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )

    需求 : 制作如下搜索欄 ; 首先 , 設(shè)置固定定位 , 固定定位盒子始終顯示在瀏覽器中指定的位置 , 與父容器或其它容器無關(guān) ; 然后 , 設(shè)置固定定位盒子垂直方向位置 , 設(shè)置為 top: 0; 緊貼頂部 ; 再后 , 設(shè)置 left: 50% 樣式 , 將盒子左側(cè)設(shè)置到中心位置 , 這個 50% 是相對于父容器的 比

    2024年02月05日
    瀏覽(39)
  • css-文本垂直居中, 左側(cè)border與文字作為導航標題

    css-文本垂直居中, 左側(cè)border與文字作為導航標題

    1.文本垂直居中 ? ? ? ? 1.1 Flexbox 布局 ????????1.2Grid 布局: 2.?左側(cè)border與文字作為導航標題

    2024年02月01日
    瀏覽(29)
  • css 實現(xiàn) html 元素內(nèi)文字水平垂直居中的N種方法

    css 實現(xiàn) html 元素內(nèi)文字水平垂直居中的N種方法

    ? ? ? ? 上一篇博文寫了div 中元素居中的N種常用方法,那么單個html元素:div(塊級元素代表),span(行內(nèi)元素代表)中的文字如何水平垂直都居中呢?實現(xiàn)方法如下: ????????本文例子使用的 html body結(jié)構(gòu)下的模型如下: ? ? ? ? 例子居中效果都如下圖: 注:當把div

    2024年02月13日
    瀏覽(35)
  • 圖片文字對齊 圖片文字居中對齊

    圖片文字對齊 圖片文字居中對齊

    方法一:? 用 vertical-align:?middle; 方法二:? 彈性

    2024年02月16日
    瀏覽(28)
  • 【Css/小程序】如何實現(xiàn)div或view中的文字左右居中和垂直居中?(已解決:多行和單行自適應)
  • web塊級如何居中,關(guān)于css/html居中問題

    1. text-align:center; 可以實現(xiàn)其內(nèi)部元素水平居中,通常用于字體水平居中,初學者也可以用于簡單塊級居中。這種方法對行內(nèi)元素 (inline),行內(nèi)塊 (inline-block),行內(nèi)表 (inline-table),inline-flex元素水平居中都有效。 2.margin:0 auto; 用于設(shè)置元素的外邊距。margin屬性,可以控制

    2024年01月19日
    瀏覽(33)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包