相关疑难解决方法(0)

如何在div中垂直居中具有可变高度的内容？

当内容的高度可变时,垂直居中div内容的最佳方法是什么.在我的特殊情况下,容器div的高度是固定的,但如果有一个解决方案可以在容器具有可变高度的情况下工作,那将是很好的.此外,我想要一个没有或很少使用CSS黑客和/或非语义标记的解决方案.

替代文字

css vertical-alignment

jes*_*vin

2017 12-12

156
推荐指数

5
解决办法

14万
查看次数

将<div>元素定位在屏幕中心

我想将一个<div>(或一个<table>)元素放在屏幕的中心,而不管屏幕大小.换句话说,"顶部"和"底部"上留下的空间应相等,"右"和"左"侧留下的空间应相等.我想用CSS完成这个.

我尝试了以下但它不起作用:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Run Code Online (Sandbox Code Playgroud)

注意:
如果<div>元素(或<table>)与网站一起滚动,则要么很好.只是希望它在页面加载时居中.

html javascript css

Sum*_*pta

2014 08-21

122
推荐指数

8
解决办法

41万
查看次数

如何垂直居中div？

我正在尝试制作一个小的用户名和密码输入框.

我想问一下,你如何垂直对齐一个div？

我有的是:

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

Run Code Online (Sandbox Code Playgroud)

如何使用id用户名和表单将div垂直对齐到中心？我试图把:

vertical-align: middle;

Run Code Online (Sandbox Code Playgroud)

在CSS中为id登录的div,但它似乎不起作用.任何帮助,将不胜感激.

css alignment

Cra*_*ays

2016 01-06

115
推荐指数

6
解决办法

36万
查看次数

车身高度100%显示垂直滚动条

出于好奇,考虑下面的例子,为什么#container div上的边距导致垂直滚动条出现在浏览器中？容器的高度远小于设置为100%的身高.

我已经为除#container之外的所有元素将padding和margin设置为0.请注意,我故意在#container div上省略了绝对定位.在这种情况下,浏览器如何计算身体的高度以及保证金如何影响身体？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

关于JSFiddle的例子

html css

neo*_*ium

2012 10-22

73
推荐指数

4
解决办法

7万
查看次数

使用CSS垂直居中旋转文本

我有以下HTML:

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

css vertical-text vertical-alignment css3 centering

dan*_*nvk

2013 03-01

70
推荐指数

3
解决办法

6万
查看次数

flex-wrap如何使用align-self,align-items和align-content？

`align-self`

在以下代码中,align-self使用flex-wrap: nowrap.

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

Run Code Online (Sandbox Code Playgroud)

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Run Code Online (Sandbox Code Playgroud)

但是当容器切换到时flex-wrap: wrap,align-self属性会失败.

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: …

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

Mic*_*l_B

lucky-day

56
推荐指数

2
解决办法

2万
查看次数

使用Semantic-UI垂直对齐div

我似乎无法在文档中的任何地方找到它.

有没有办法使用Semantic-UI语义垂直居中页面上的div :)

这是我正在尝试做的事情:

<div class="ui centered grid">
  <div class="eight column wide">
    <div>I want to be centered vertically on a page</div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css semantic-ui

Mic*_*ait

2015 06-03

22
推荐指数

3
解决办法

4万
查看次数

如何垂直对齐Bootstrap v4模式对话框

Bootstrap 4中的垂直中心模态对话框.

注意:添加了以下要求以明确我正在寻找一种适当的方法来垂直居中Bootstrap模式,涵盖所有可能的设备,在所有浏览器中.在我的情况下,我想要一个大型SPA在整个应用程序中重用相同的模式,所以我需要它在每种情况下工作.

这应该:

即使在高于设备高度的情况下,也可以在所有设备上访问模态内容
适用于任何设备+浏览器组合,市场份额大于 1%
不使用display:table-cell或类似的黑客(任何布局技术不意味着或设计用于布局)
靠近click或tap在其外的任何地方.modal-content(包括上方和下方).
尽可能限制jQuery/JavaScript的使用
(可选)处理默认的Bootstrap示例,无需进行标记修改

modal-dialog vertical-alignment flexbox bootstrap-modal bootstrap-4

And*_*hiu

2018 01-18

21
推荐指数

4
解决办法

4万
查看次数

垂直居中的div？

我试图垂直居中body(不是水平).此外,我不想指定高度或类似的东西.我尝试添加一个100%高度和其他东西的包装,但无处可去.你能帮帮我解决这个问题吗？

jsFiddle在这里

 <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>?

Run Code Online (Sandbox Code Playgroud)

html css centering

Hun*_*ell

2012 10-08

20
推荐指数

3
解决办法

4万
查看次数

水平和垂直居中div,并在调整父级大小时保持居中

我想在任何时候水平和垂直居中.

我可以减少/增加窗口的宽度,div将通过始终保持在窗口的中心来响应

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Run Code Online (Sandbox Code Playgroud)

这是我目前所拥有的JSFiddle示例.但我想保持div垂直居中,所以如果我减少/增加窗口的高度,div将通过停留在窗口中间来响应.

关于这个例子,我想让黑盒子在窗口调整大小时垂直居中,就像它总是水平放置在中心一样.

html css html5 css3

Aar*_*ron

2014 09-25

16
推荐指数

1
解决办法

7万
查看次数

标签统计

css ×9

html ×5

css3 ×3

vertical-alignment ×3

centering ×2

flexbox ×2

alignment ×1

bootstrap-4 ×1

bootstrap-modal ×1

html5 ×1

javascript ×1

modal-dialog ×1

semantic-ui ×1

vertical-text ×1

align-self

标签 统计

`align-self`

标签统计