如何让div里文字靠右? 让div靠右,而不是让div里边的内容靠右

\u7528div+css\u5982\u4f55\u8ba9\u5b57\u9760\u53f3\u5bf9\u9f50


\u4f60\u7684\u65f6\u95f4\u53ef\u4ee5\u52a0\u5728\u8fd9\u3002

\u8fd9\u4e2a\u662f\u6e05\u6d6e\u52a8\u7528\u7684\uff0c\u4e00\u822c\u6709\u6d6e\u52a8\u7684\u8bdd\uff0c\u90fd\u8981\u6e05\u9664\u6d6e\u52a8\u3002\u8fd9\u6837\u624d\u80fd\u907f\u514d\u4e00\u4e9b\u95ee\u9898\u53d1\u751f\u3002

可以使用“text-align:right;”属性让div里文字靠右。

1、新建html文档,在body标签中添加div标签,然后为div标签设置宽高和边框属性:

2、在div标签中输入文字,这时默认情况下div里面的文字靠左居中:

3、为div标签添加属性“text-align: right;”,“text-align”指的是文字对齐方式,“ right”指的是靠右对齐,这时div里面的文字就会靠右对齐:



使用text-align属性可以控制。

示例

<html>
<body>
<div style="text-align:right;width:500px;background:#def;">
这里的文字是靠右的
</div>
</body>
</html>


<div style="text-align:right;width:200px;height:100px">儿子和女儿都是妈生的。</div>

text-align: right; 或padding-right

text-align: right;

  • css鎬庝箞璁ヾiv涓婁笅灞呬腑,闈犲彸瀵归綈
    绛旓細</html> 杩介棶锛 鍏勫紵锛屾垜鏄棶璁ヾiv涓婁笅灞呬腑锛屽苟涓闈犲彸瀵归綈浣犻偅涓叾瀹炵敤position:fixed;灏卞彲浠ヤ簡 鍥炵瓟锛 <html>
  • 濡備綍璁鏌愪釜div灞呭乏銆灞呭彸銆佸墽涓
    绛旓細鍦ㄥ寘瑁圭洅瀛愬拰鏂囧瓧鐨勭洅瀛愯韩涓婁娇鐢ㄥ脊鎬у竷灞锛坉isplay锛歠lex锛沠lex-direction: column;锛塮lex-direction: column;锛堝苟鍒楋級
  • css鎬庝箞璁ヾiv涓婁笅灞呬腑,闈犲彸瀵归綈
    绛旓細<div style="height:1600px;">鍐呭鏄剧ず灞</div> <div id="leftdiv" style="position:absolute;z-index:1; left:10px;" >灞鍐鏄剧ず</div></body> </html> 杩介棶锛 鍏勫紵锛屾垜鏄棶璁ヾiv涓婁笅灞呬腑锛屽苟涓闈犲彸瀵归綈浣犻偅涓叾瀹炵敤position:fixed;灏卞彲浠ヤ簡 鍥炵瓟锛 <html> <head><title>灞涓眰</title...
  • 鎬庝箞璁ヾiv闈犲彸瀵归綈
    绛旓細寰堢畝鍗曪紝鍦╰ime閲岄潰鍔犱笂float锛歭eft锛涘氨濂戒簡锛屽洜涓轰綘娌″姞time鍙槸璁╀粬鏂囨湰灞呬腑锛屽鑷碽attery涓嬪幓銆傝鎯冲湪涓涓笂闈紝璁颁綇浠ュ悗瑕佸叏娴姩銆
  • CSS鎬庝箞璁惧垎鍒疆澶DIV閲岄潰鐨3涓苟鎺掑皬DIV闈犲乏 灞呬腑 闈犲彸!
    绛旓細2銆佺劧鍚庡湪涓婃柟璁剧疆鏍峰紡锛屽厛缁欏鍥寸殑div璁剧疆瀹藉害涓600px浠ュ強display灞炴т负flex锛岀劧鍚庤缃柟鍚戝睘鎬lex-direction涓烘í鍚戯紝鎺ョ潃璁剧疆灏廳iv鐨勫搴︿负200px锛屽啀璁剧疆flex灞炴х殑鍊间负1锛屾剰鎬濇槸鎵鍗犳瘮渚嬩负1锛屾渶鍚庤皟鏁翠竴涓嬭儗鏅鑹诧紝瀛椾綋澶у皬灏卞彲浠ヤ簡锛3銆佹渶鍚庢墦寮娴忚鍣紝鍗冲彲鐪嬪埌3涓瓑浠界殑div浜嗭細...
  • 鐢╰ype=text/css鎬庝箞鎶<div class="class_right22">鏍煎紡鍐欎负闈犲彸
    绛旓細鎶div闈犲彸锛 璁剧疆娴姩 float锛歳ight 濡傛灉婊℃剰鎴戠殑绛旀璇烽噰绾 涓嶆弧鎰忚杩介棶 绁濅綘寮蹇冩瘡涓澶
  • div閲鐨勫厓绱犲垎鍒潬宸闈犲彸灞呬腑濡備綍瀹炵幇
    绛旓細1銆佽璁剧疆鍏冪礌涓烘枃鏈佸浘鐗囩瓑琛屽唴鍏冪礌鏃讹紝姘村钩灞呬腑鏄氳繃缁欑埗鍏冪礌璁剧疆 text-align:center 鏉ュ疄鐜扮殑銆2銆佸綋琚缃厓绱犱负鍧楃姸鍏冪礌鏃剁敤 text-align锛歝enter 灏变笉璧蜂綔鐢ㄤ簡銆傛弧瓒冲畾瀹藉拰鍧楃姸涓や釜鏉′欢鐨勫厓绱犳槸鍙互閫氳繃璁剧疆鈥滃乏鍙砿argin鈥濆间负鈥渁uto鈥濇潵瀹炵幇灞呬腑鐨勩3銆佷负闇瑕佽缃殑灞呬腑鐨勫厓绱犲闈㈠姞鍏ヤ竴涓 ...
  • 鏂囧瓧灞呬腑鎬庝箞璁剧疆?
    绛旓細鍙互鐢ㄢ渢ext-align鈥濆睘鎬ф帶鍒舵枃瀛楃殑浣嶇疆锛屸渃enter鈥濆睘鎬у璁╂枃瀛灞呬腑鏄剧ず銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓娣诲姞涓涓猟iv鏍囩锛屽湪div鏍囩涓坊鍔爌鏍囩锛岃繖鏃舵枃瀛楀皢浼氬湪div鏍囩涓潬宸︽樉绀猴細2銆佷负div鏍囩璁剧疆鈥渢ext-align鈥濆睘鎬э紝灞炴у间负鈥渃enter鈥濓紝杩欐椂鏂囨湰灏嗕細灞呬腑鏄剧ず锛3銆佸鏋滄兂璁╂枃鏈闈犲彸鏄剧ず锛屽彲浠ヤ负鈥...
  • 璇烽棶濡備綍鍦DIV灞傞噷 璁╀竴娈佃瘽鍒嗗埆闈犲乏 鍜闈犲彸銆??
    绛旓細鍙﹀瓨涓 html <div style="width:500px; height:500px;border:1px solid #999"> <div style="float:left"> 浠婂ぉ澶╂皵 </div> <div style="float:right"> 涓嶉敊 </div> </div>
  • html涓琛ㄦ牸鎬庢牱璁剧疆鏂囧瓧灞呬腑
    绛旓細鍙互鐢ㄢ渢ext-align鈥濆睘鎬ф帶鍒禿u鏂囧瓧鐨勪綅缃紝鈥渃enter鈥濆睘鎬у璁╂枃瀛灞呬腑鏄剧ず銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓娣诲姞涓涓猟iv鏍囩锛屽湪div鏍囩涓坊鍔爌鏍囩锛岃繖鏃舵枃瀛楀皢浼氬湪div鏍囩涓潬宸︽樉绀猴細2銆佷负div鏍囩璁剧疆鈥渢ext-align鈥濆睘鎬э紝灞炴у间负鈥渃enter鈥濓紝杩欐椂鏂囨湰灏嗕細灞呬腑鏄剧ず锛3銆佹兂璁╂枃鏈闈犲彸鏄剧ず锛屽彲浠ヤ负鈥...
  • 本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网