标签: centering

我有一个只存在表单的页面,我希望将表单放在屏幕的中心.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

该justify-content-center对齐表格水平,但我无法弄清楚如何垂直对齐.我试过使用align-items-center和align-self-center,但它不起作用.

我错过了什么？

DEMO

我的页面中有一个按钮,单击该按钮会div在屏幕中间显示(弹出式样式).

我使用以下CSS来居中div在屏幕中间:

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

只要页面不向下滚动,此CSS就可以正常工作.

但是,如果我将按钮放在我的页面底部,当它被点击时,它div会显示在顶部,用户必须向上滚动才能查看该内容div.

我想知道如何div在屏幕中间显示,即使页面已滚动.

我正在尝试使用CSS Grid创建一个简单的页面.

我没有做的是将文本从HTML中心放到相应的网格单元格中.

我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg

我该怎么做呢？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center; …

在此示例中,图像不居中.为什么？我的浏览器是Windows 7上的Google Chrome v10,而不是IE浏览器.

<img src="/img/logo.png" style="margin:0px auto;"/>

所以我知道如果我们使用,我们可以将div水平居中margin:0 auto;.应该margin:auto auto;如何工作我认为它应该工作？垂直居中也是如此？

为什么不起作用vertical-align:middle;？

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

的jsfiddle

我需要添加添加具有复杂项目背景的ListView:顶部和底部的偶数/奇数和圆角不同.它看起来像这样:

我已经通过level-list实现了所有这些东西,但还有一件事我想做.现在底部项目靠近屏幕的底部.最好添加一些空间.

我不想为ListView添加底部边距,我只需要最后一项的保证金.

我看到这样做的方式:

页脚

一种破解 - 将带有空TextView的页脚添加到ListView.但是页脚是非常不稳定的东西,它们通常会在notifyDataSetChanged之后消失,并且无法让它们恢复

带透明像素的图像

我让设计师向底部背景资源添加透明像素.不幸的是,在这种情况下,垂直居中完全被打破.例如,有9patch像这样:

和这样的布局:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
        >
    <!-- View with background with transparent pixels on bottom -->
    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                  android:id="@+id/item"
                  android:background="@drawable/some_bgr"
                  android:padding="10dp"
            >
        <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"
                  android:text="Title"
                  android:layout_gravity="center"
                  android:textSize="18sp"
                />
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:text="Detail"
                  android:layout_gravity="center"
                  android:textSize="18sp"
                />
    </LinearLayout>

    <!-- Just for marking place took by view -->
    <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
                 android:layout_below="@id/item"
                 android:background="#88ff55"
            />
</RelativeLayout>

结果:

如您所见,居中不起作用.不幸.(顺便说一句,如果将此9patch指定为TextView的背景,则居中工作效果很好.如果你知道任何文章,请解释一下,请告诉我.)

在Adapter实现中添加最后一项的下边距

这应该工作,但由于未知的原因,我仍然无法使它工作.我不喜欢这种方式,因为我不喜欢修改代码中的维度.

所以

已经存在想象的方式 - 使用特定的位图和边距构造一些XML drawable.根据drawables概念应该是可能的,但我找不到实现.可能有人知道吗？

还有其他想法吗？

我已经尝试了一切但似乎无法将这个文本集中在一起.有人可以告诉我错误在哪里.

NSMutableParagraphStyle *paragraphStyle = NSMutableParagraphStyle.new;
paragraphStyle.alignment = NSTextAlignmentCenter;
label.attributedText = [[NSAttributedString alloc] initWithString:cell.EventTitle.text attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor],NSParagraphStyleAttributeName:paragraphStyle,NSBaselineOffsetAttributeName : @0,NSFontAttributeName : [UIFont fontWithName:@"BrandonGrotesque-Black" size:34]}];

我有以下HTML:

<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer是一个狭窄的垂直条带.div.inner旋转90度.我想文字"居中？" 显示在其容器div中居中.我事先不知道div的大小.

这很接近:http://jsfiddle.net/CCMyf/2/.你可以从jsfiddle看到文本在transform: rotate(-90deg)应用样式之前是垂直居中的,但在之后有些偏移.这在div.outer短时间内尤其明显.

是否可以在不事先知道任何尺寸的情况下垂直居中这个文本？我没有找到任何transform-origin解决这个问题的价值观.

在列表中表示的页脚中有一组链接是很常见的,例如:

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我希望div#footer中的所有内容都水平居中.如果它是一个段落,你会很容易地说:p { text-align: center; }.或者,如果我知道<ul>我可以说的宽度#footer ul { width: 400px; margin: 0 auto; }.

但是如何在无需设置固定宽度的情况下将无序列表项居中<ul>？

编辑:澄清 - 列表项应该是彼此相邻的,而不是下面的.

我一直在使用Twitter的bootstrap,我希望进度条上的文本无论值多少都集中在on栏上.

以下链接是我现在拥有的.我希望所有文本都与最底部的条形对齐.

截图:

我已经尽力使用纯CSS,我尽量避免使用JS,但如果这是最干净的方法,我愿意接受它.

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>