相关疑难解决方法(0)

我倾向于在我设计的每个网站上都这样做,但我还没有真正找到一个真正好的方法来做到这一点.公司通常会向我提供他们的徽标,当您转到页面时,我将其置于屏幕中间,然后自动将您转到主页.我似乎无法找到一个好的方法来将图像置于屏幕中间,而不需要一堆表和div!有什么好建议吗？!

我正在使用div分配了以下 css 属性的display: -webkit-box;.

我的这个div包含我想垂直居中对齐的文本。在不更改display赋予 div的属性的情况下，这可能吗？

附加信息：

我正在使用最新版本的 Chrome 并尝试过vertical-align: middle;失败。

这是我在JSFIDDLE中的演示工作

NB不使用表属性

http://jsfiddle.net/SxxWV/12/

我想让课程.box应该垂直居中

CSS

.main{ height:300px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }

/* for centering */
.box{ display: inline-block;position:relative; top:50% }
.main{ text-align: center; }

HTML

<div class="main">

 <div class="box"></div>   
</div>

假设我有两个嵌套的 div。类似于以下内容：-

<div id="div1">Some name here
  <div id="div2">DIV2</div>
</div>

假设div1的高度和宽度是100px。并且div2的高宽都是50px。我如何使它们看起来同心，即 div2 必须位于 div1 内，从四面八方等距（使用 CSS）。

我为我的javascript自动验证脚本生成一个div .它是使用以下代码生成的:

var alertbox = document.createElement("div");

现在我如何以水平和垂直方式编程中心div？

注意:目前我正在显示一个警告框但是一旦我知道如何居中div,我将用这个动态生成的div替换警报框,这也将提供一些类似灯箱的效果.

谢谢

注意:作为参考,您可以在此处下载此脚本的最新版本.

请注意,我不想使用外部css,因为这是验证脚本,它应该能够以编程方式执行.例如:使用这样的东西可能会有所帮助:

 alertbox.style.position: whatever
 ....

如何将#box div垂直居中在页面中心？我试过vertical-align:middle; 但它不起作用.你可以在这里查看网站

这是css:

iframe {
  position: fixed;  
  width: 100vw; 
  height: 100vh;  
  border: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  z-index: 999999;
}

body {
  background-color: #000;
}

#box {
  text-align: center;
  vertical-align: middle;
}

#link {
  color: #FFF;
}

#download {
  color: #FFF;
}

重要:

我的帖子(通常)不重复.我发现这个,这个,这个和这个堆栈溢出后(也有可能所有重复).我尝试这个帖子最常见的答案,但它不起作用.我也试过其他方法,但我无法达到目标.

所以,我有一个带文字的大div:

 html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}

h1 {
    font-size:350%;
}

<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
    <h1 >Big text</h1> 
</div>

我的问题是,我无法想象如何将文本放在我的灰色div的中心(垂直+水平).如您所见,文本显示在div的中心(水平),但不在垂直中心.我在身体的一部分设置了中心(垂直+水平).

在我的示例中,我尝试将文本垂直对齐所有这些帖子的最常见响应,但它不起作用.我已经尝试过其他方式,我们可以在链接的问题中找到它们,但它们不起作用:我们总是有相同的结果.

我想我有这个问题,因为我在所有页面上显示我的(灰色)div.我尝试了一个普通的div并且代码有效:我的文本是垂直居中的.

简短的问题:

如何将文本垂直居中于灰色div？

如果您有疑问,请告诉我.

斯芬克斯.

如何使用CSS-in-JS实现绝对居中？当我使用以下代码时，我的组件在屏幕上移动。我猜翻译被应用了很多次，而不是一次。怎么回事，如何在不使用库的情况下进行修复？

  render() {
      return (<ComponentASD 
        style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
      }} />);
    }

我希望内容垂直和水平居中，但它仅水平居中。问题是我没有固定的高度。谢谢你们的帮助！

html,
body {
  height: 100% margin: 0;
  overflow: hidden;
}
.content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

<div class="content">
  <h1>Welcome to the website!</h1>
</div>

我有一个div登录表单.我想在所有设备中水平和垂直居中对齐div.任何帮助表示赞赏

我希望有 4 个 div（2x2），中间有一个标志 div。

到目前为止，我遇到了这个：示例发现

* {
  box-sizing: border-box;
}

.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  padding:50px;
}

.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding:50px;
}
.grid1 {
  border-right:1px solid;
  border-bottom:1px solid;
}
.grid2 {
  border-bottom:1px solid;
  border-left:1px solid;
}
.grid3 {
  border-top:1px solid;
  border-right:1px solid;
}
.grid4 {
  border-left:1px solid;
  border-top:1px solid;
}

<div class="info-box">
  <div class="info-item grid1">1</div>
  <div class="info-item grid2">2</div>
  <div class="info-item grid3">3</div>
  <div class="info-item …

首先需要告诉你我正在使用这段代码:

https://jsfiddle.net/hbahar95/27/

  .text.ellipsis {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 5px;
}

因为我需要为标题设置多行椭圆.这部分代码有效.

但是现在我需要在div中居中垂直div,这部分代码部分工作....我真的尝试了一切,但仍然无法解决问题.

你可以在这里看到实例:http://phpbb32.majordroid.com/index.php

在蓝色div内部一切都很好,但是由于某种原因,在白色div标题内部下沉,或者换句话说不是居中.

所以我希望你能帮助我在div里面垂直居中,它需要在IE8 +中工作

谢谢