相关疑难解决方法(0)

在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用margin以及何时使用padding？

我试图找到最有效的方法来将文本与div对齐.我尝试了一些东西,似乎都没有用.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse …

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

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

我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.

如何为每个标签创建文本对齐x和y？

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

CSS中的边距和填充之间究竟有什么区别？它似乎没有多少用途.你能举个例子说明差异在哪里(为什么知道差异很重要)？

假设你有一个div,说你把它涂成绿色并给它一个明确的宽度,当我把东西放进去时,在我的情况下是一个img和另一个div.这个想法是容器div的内容将导致容器div伸展出来,并成为内容的背景.但是当我这样做时,包含的div缩小以适应非浮动对象,并且浮动对象将要么一直出来,要么是一半,一半,并且与大div的大小没有任何关系.

为什么是这样？有没有我缺少的东西,我怎样才能获得浮动的物品来拉伸包含div的高度？

我使用以下方法在css中创建垂直对齐方式

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

并使用以下div结构.

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

虽然这似乎适用于这种情况,但我感到惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然.我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,这在我们的情况下是基数,但是上面的50%的值是以百分比计算的.宽度.:(

有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript？

我试图将链接与图像居中,但似乎无法以任何方式垂直移动内容.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

图标为22 x 22px

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}

我有一个<div>固定高度的元素,我想在该元素中垂直居中一些文本.

我一直在尝试按照http://phrogz.net/css/vertical-align/index.html上的说明进行操作.但是,它似乎对我不起作用.

我已经发布了我正在尝试的http://jsfiddle.net/scwebgroup/74Rnq/.如果我将HeaderBrand的margin-top更改为约-22px,那么它似乎是正确的.

任何人都可以看到为什么文章中描述的技术不能按预期工作？

注意:此处的最佳答案仅适用于文本未换行到第二行的情况.

我正在尝试使用table-cell方式将div垂直和水平居中.

它使用以下代码时工作:

div {
    display: table;
}
.logo {
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

但我宁愿换.logo在另一个名为DIV .center喜欢这里的jsfiddle,但由于某些原因,虽然它工作在的jsfiddle,它不是为我工作在我的网站.