from.. 2009-03-06 08:51 采纳率: 100%
浏览 352
已采纳

如何使用 CSS 轻松地将一个 div 水平居中? [重复]

This question already has an answer here:

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. 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
</div>

转载于:https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css

  • 写回答

22条回答 默认 最新

  • 狐狸.fox 2012-05-29 10:28
    关注

    In the case of a non-fixed width div (i.e. you don't know how much space the div will occupy).

    #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.

    You can check browser compatibility on Caniuse

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(21条)

报告相同问题?

悬赏问题

  • ¥15 基于ucc28019的pfc电路中芯片一直不工作
  • ¥15 yolov8在3588板子端c++推理报错
  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能