【问题标题】:Center div in bootstrap div horizontally and vertically(ASP.NET)引导 div 中的中心 div 水平和垂直(ASP.NET)
【发布时间】:2017-09-19 23:54:02
【问题描述】:

我有带有引导类的 div 这是代码

  <div class="col-lg-12">
                <div style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;">
                        <p>
                            The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
                        </p>
                    </div>
               </div>

我需要将这个 div 垂直和水平居中

<div style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;">

我试试这种风格

style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;"

但它不是垂直居中,而是水平居中。

我的错误在哪里?

【问题讨论】:

    标签: jquery html css asp.net twitter-bootstrap


    【解决方案1】:
    <div class="col-lg-12">
            <div style="text-align: center;min-width: 50%;max-width:100%; font-size: 20px; display: inline-block; top: 0;left: 0;bottom: 0;right: 0;position: absolute; margin-top:20%; margin-bottom:20% ">
               <p>
                    The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
                </p>
            </div>
        </div>
    

    【讨论】:

      【解决方案2】:

      试试这个代码:

       <div class="col-lg-12">
        <div style="text-align: center;min-width: 50%;max-width:100%; font-size: 20px; display: inline-block; top: 0;left: 0;bottom: 0;right: 0;position: absolute;margin:30%;">
         <p>
          The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
         </p>
        </div>
       </div>
      

      【讨论】:

        猜你喜欢
        • 2011-02-13
        • 2017-05-17
        • 1970-01-01
        • 2015-08-29
        • 1970-01-01
        • 2016-12-13
        • 2013-10-08
        • 1970-01-01
        • 2014-07-03
        相关资源
        最近更新 更多