标签: center

我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.

我试过这个.但需要根据宽度的响应进行调整.

.center {
  left: 50%;
  bottom:5px;
}

有任何想法吗？

我有一个设置为800px的div标签.当浏览器宽度大于800px时,它不应该拉伸,但它应该将它带到页面的中间.widthdiv

我正在实施分页,它需要集中.问题是链接需要显示为块,因此需要浮动它们.但是,text-align: center;对他们不起作用.我可以通过给左边的包装div填充来实现它,但是每个页面都有不同的页面数,所以这不起作用.这是我的代码:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

为了得到这个想法,我想要的是:

这是一个两部分问题:

1. 当您不知道模态的确切高度时,如何将模态垂直放置在中心？

2. 是否有可能让模态居中并且在模态体中有溢出:auto,但仅当模态超过屏幕高度时？

我试过用这个:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容比垂直屏幕尺寸大得多时,这给了我所需的结果,但对于小模态内容,它几乎无法使用.

代码:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

现在渲染时,跨度对齐div的左下角.

我很好奇为什么<center>HTML中的标记已被弃用.

这<center>是一种通过将容器封装在<center>标签中来快速居中对齐文本和图像块的简单方法,我现在找不到任何更简单的方法来实现它.

任何人都知道如何集中"东西"(不是margin-left:auto; margin-right:auto;和宽度的东西)的任何简单方法,取代的东西<center>？而且,为什么它被弃用了？

我有一个div,希望它能够水平居中 - 虽然我给它margin:0 auto;它没有居中......

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

我已经搜索了其他问题,虽然这个问题看起来和其他几个问题类似,但到目前为止我看到的任何内容似乎都没有解决我遇到的问题.

我有一个包含许多其他div的div,每个div都向左浮动.这些div每个都包含一张照片和一个标题.我想要的只是让照片组在包含div中居中.

正如你可以从下面的代码中看到的,我已经使用这两种尝试overflow:hidden与margin:x auto父div的,并且我还添加了clear:both照片后(如在其他主题的建议).似乎没有什么区别.

谢谢.我很感激任何建议.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

我知道这听起来很容易.我需要在中心放置一个文本,但是当文本太长时,它需要在下面,但仍然在我的xml的中心对齐.

这是我的代码:

 <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/showdescriptioncontenttitle"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:layout_centerHorizontal="true"
>
    <TextView 
        android:id="@+id/showdescriptiontitle"
        android:text="Title"
        android:textSize="35dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />
</LinearLayout>

我把paddingTop和Bottom放在一边因为我需要一些空间.PS:我的代码更大; 它在RelativeLayout中.

嗨我正在使用类似于以下内容的东西来获得位于屏幕中间的div:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

然而,问题是它将项目放在页面中间而不是屏幕上.因此,如果页面高几个屏幕并且我位于页面的顶部(部分的顶部显示在屏幕上),当我显示div时,它甚至不在屏幕上.你必须向下滚动才能查看它.

有人可以告诉我你是如何让它出现在屏幕中间的吗？