相关疑难解决方法(0)

我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.

这是我的div风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

做这个的最好方式是什么？

我正在尝试制作一个具有以下特征的简单页面:

1. 它的身体必须至少60em宽.
2. 它的左右边距必须同样宽,最多3em宽.
3. 调整浏览器窗口大小时,应调整文档的边距大小,以便浏览器窗口的水平滚动条覆盖最小范围.

将这些需求转换为线性编程问题,我们得到:

DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document's body)
LRMG = (width of the document's left and right margins)
HSCR = (range of the browser window's horizontal scroll bar)

OBJECTIVE:
MIN HSCR   /* Third requirement */

CONSTRAINTS:
HSCR = BODY + 2*LRMG - BRWS  /* From the definition of how a browser's
                              * horizontal scrollbar works. */
BODY >= 60  /* First requirement */
LRMG <= …

我只是学习CSS流体布局和响应式设计,我试图在布局中使用没有px值的所有百分比值.

到目前为止似乎有效,但在一个地方,我看到了一些我没想到的东西.我试图在两个垂直堆叠的div之间放置一个边距,这个div根据容器的高度而变化.当我垂直调整窗口大小时,我希望边距会改变,但如果你水平调整它,它也会增长,这是我不想要的.我错过了什么？

这是一个小提琴.感谢您的帮助.

http://jsfiddle.net/gregir/aP5kz/

例如,我有一个高度为的div 100px(我不知道高度,但假设我做了).我想设置margin-bottom为百分比,所以25%将25px假设先前的高度.但是,百分比似乎是文档,而不是元素:

<div style="height:100px;margin-bottom:100%"></div>

边距应该是100px但不是,它是页面高度的100%.

元素只是一行没有背景的文本,因此height:150%理论上使用也可以.

我知道这应该是直截了当的,但任何人都可以告诉我为什么当a margin-top: 50%应用于孩子时,下面的子盒子会溢出父母的容器.如何计算保证金最高百分比？

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}

<div class="container">
<p> Some Cool content</p>
 
</div>

子元素不应该从200px(父级的设置高度)放置50%,即从顶部100px？

我正在开发一个项目,客户希望导航<div>根据屏幕高度进行对齐,类似于margin-left屏幕宽度减小时百分比的工作方式.

所以,我给了margin-top: 20%导航<div>显示边距,但是当我减小窗口的高度时,它不会根据屏幕高度调整,尽管它在我减小屏幕宽度时起作用.

我的问题不是如何实现这一目标,而是为什么百分比水平而非垂直？

这是一个例子:http://jsfiddle.net/sandeep/5VReY/

我有一系列图像，它们有不同的标题。这些标题中的每一个都需要看起来漂浮在图像底部的中间。这是它的外观以及我如何在 div 中构建它的模型。因为标题底部和下面的任何 div 之间需要有空间，所以标题不能绝对定位。

我知道这可以在 javascript 中完成，但这将是一个黑客，所以我更愿意找到一个只使用 CSS 的解决方案。

...这是到目前为止的代码：JS FIDDLE

.outer {
  position: relative;
  width: 320px;
  margin-bottom:24px // this needs to be the space between the bottom of the caption and the next image or whatever div is beneath.
}

.image {
  background-color: blue;
  width: 320px;
  height: 380px;
  position: relative;
  border-radius: 5px;
}

.caption {
  position: relative;
  margin-top: -24px;
  /* THIS NEEDS TO BE 50% of the Captions variable height */
}

.card {
  margin-right: 25%;
  margin-left: …

我对这个发现有点磕磕绊绊,无法向我自己解释这背后的原因.

附带的小提琴显示两个DIV,一个嵌套在另一个.外部DIV具有设定的高度和宽度以及相对位置.内部DIV还具有设定的高度和宽度.除此之外,它的顶部,右侧和底部填充设置为100%.\

据我所知,填充将根据父级的高度和宽度得出.但是,结果显示所有填充(顶部,右侧和底部)仅引用父级的宽度.似乎所有浏览器都呈现相同的结果.因此,它必须是某种标准的一部分.

我的问题是为什么以这种方式实现这一点以及是否有一种方法可以引用父级的高度而不是父级的顶部和底部填充的宽度.

HTML

<div class='wrapper'>
    <div class='elementContainer'>
        This line should start halfway down the yellow box
    </div>
</div>

CSS

.wrapper
{
    position: relative;

    height: 300px;
    width: 400px;

    background: lightyellow;
    border: 1px solid black;
}

.elementContainer
{
    position: relative;
    height: 200px;
    width: 300px;

    padding-top: 50%;

    background: red;
}

小提琴示例: http ://jsfiddle.net/jakelauer/s2ZXV/

在上面的例子中,.elementContainer有一个填充顶部50%.这应该根据父元素的(.wrapper)高度计算,这意味着它应该出来150px.相反,它出来了200px.这是怎么回事？

我想知道是否可以在页面中间分配一组堆叠文本？将它们放置在中心并不太难,但问题是,他们被放置left,right,top,和bottom,我认为意味着他们需要给予:position:absolute.此外,.headline给出了文本fade-in(不透明度0到100)和animation命令.在缩放方面,文本是响应性的,并且随着窗口变小而变小.此外,他们被分配了自己的z-index.

在下图中,我已经列出了我想要实现的整体结构,但由于我想要完成的文本行为,我遇到了很多困难.

对于功能参考,这里是一个jsfiddle.

请帮帮我,谢谢你!请注意,我更喜欢使用CSS,因为它只是一个简单的函数,只在页面加载时出现一次.但是,如果这是一个只有javascript可以解决的问题,请告诉我:)

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.fade {
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    } …

考虑以下html

<div id="parent">
    <div id="child"/>
</div>

我给了父母一个100px的高度.孩子的身高为100%,填充量为"10%0".在CSS中:

* {
    box-sizing: border-box;
}
#parent {
    height: 100px ;
}
#child {
    height: 100%;
    padding: 10% 0;
}

或者结帐这个 jsfiddle.无论如何,从上面我可以预期子div的顶部/底部边界为10px(100px的10%).但它是31.5px.有人可以解释为什么会发生这种情况以及如何实现我的目标吗？

非常感谢!

我有非常简单的标记和样式规则,应该把我的 div放在页面的中间,但它没有(实际上,div的顶部将位于中间,而不是100%真正垂直居中)当视口是足够小的高度.

HTML:

<div>adf</div>

CSS:

div {
    background-color:red;
    margin-top:50%;
}

你可以看看我的小提琴看到这个.它需要缩小渲染窗口(右下角),因为它最初是正确的.