相关疑难解决方法(0)

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我div有一套display:block.(90px height和width)我里面有一些文字.

我需要文本在垂直和水平方向上对齐.

我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.

有任何想法吗？

我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.

其中一个图像需要absolute放在div中.

在所有常见浏览器上工作所需的CSS是什么？

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它​​们是水平居中的.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

我想将一个div添加到另一个div中.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前使用的CSS.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小？

我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢？

<div>在页面上垂直和水平居中元素的最佳方法是什么？

我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么？

我有一个200 x 200像素的div.我想在div的中间放置一个50 x 50像素的图像.

怎么做到呢？

我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..

我有以下代码设置一个容器,其高度随浏览器重新调整大小而改变(以保持方形宽高比).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如何在容器内垂直对齐IMG？我的所有图像都有不同的高度,容器不能有固定的高度/线高,因为它的响应...请帮忙!

我试图将两个链接的"查看网站"和"查看项目"集中在周围的div中.有人可以指出我需要做些什么来使这项工作？

JS小提琴:http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}