相关疑难解决方法(0)

在CSS中居中一个div

我正在尝试将newsslider(在div底部容器中)放在此页面上:

http://www.luukratief-design.nl/dump/parallax/index.html

我已经有了 text-align: center;

它仍然无效.

有什么建议?

html css center

28
推荐指数
3
解决办法
2万
查看次数

我们什么时候知道Angular中元素的实际宽度?

我想创建一个以div为中心的指令.

到目前为止,我有这个代码:

app.directive("setcenter", function () {
    return {
        scope:{
            setcenter: '='
        },
        link: function (scope, element, attrs) {

            scope.$watch('setcenter', function (newValue) {
                if (newValue == true) {
                    var width = element.width();
                    element.css('position', 'absolute');
                    element.css('top', '80px');
                    element.css('left', '50%');
                    element.css('z-index', '200');
                    element.css('margin-left', '-' + width / 2 + 'px');
                }
            });
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

问题是元素的宽度.该指令的重点是使用此指令的div没有设置宽度.我希望这个指令能够找出div的宽度和中心.

我遇到的问题是,当调用指令时,div的实际宽度尚不清楚.当我在我的情况下使用它时,div是800px,但是当页面加载完毕后,div为221px.

那么,我该怎么做才能等到div的实际宽度已知?

angularjs angularjs-directive

28
推荐指数
2
解决办法
5万
查看次数

灵活的盒子模型 - 显示器:flex,box,flexbox?

我们很多人今天都知道,上了年纪值display像财产inlineblock新的灵活盒模型已经在CSS3中被引入后,已经过时.但是,我们可能会在同一个灵活的盒子模型中在网络上找到不同的信息.

我们可能会发现主要存在3种不同的值display,即财产flex,boxflexbox.这三个灵活的盒子模型和使用哪一个有什么区别?

css css3 flexbox

24
推荐指数
2
解决办法
2万
查看次数

jQuery同位素居中

可能重复:
如何在DIV中居DIV?

请看下面的图片:

在此输入图像描述

如何使灰色方块在红色容器div内水平居中?这都是用同位素制成的,所以请记住这一点.

提前致谢.

在此输入图像描述 在此输入图像描述

即使父(红色)div总是在中间对齐,灰色,较小的div也不是.在顶部图像中,当它们在一列中对齐时,该列应位于包装器(红色)div的正中间.

jquery centering jquery-isotope

21
推荐指数
2
解决办法
1万
查看次数

CSS:水平和垂直页面的中心形式

如何在我的页面中水平和垂直居中名为form_login的表单?

这是我正在使用的HTML:

<body>
    <form id="form_login">
        <p>
            <input type="text" id="username" placeholder="username" />
        </p>
        <p>
            <input type="password" id="password" placeholder="password" />
        </p>
        <p>
            <input type="text" id="server" placeholder="server" />
        </p>
        <p>
            <button id="submitbutton" type="button">Se connecter</button>
        </p>
    </form>
</body>
Run Code Online (Sandbox Code Playgroud)

我试过做以下css,但我的表格永远不会集中:

#form_login {
    left: 50%;
    top: 50%;
    margin-left: -25%;
    position: absolute;
    margin-top: -25%;
}
Run Code Online (Sandbox Code Playgroud)

html css css3

21
推荐指数
5
解决办法
14万
查看次数

如何在父div中水平居中三个div?

我知道这个问题经常被问到,但我似乎永远无法让它发挥作用.你能告诉我什么是错的吗?

我在#container div中有三个div,我想并排放在一起.#container是1000px宽(我希望保持这种方式).这是我的代码:

#container {
  margin-top: 500px;
  position: absolute;
  width: 1000px;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
#right {
  float: right;
}
#left {
  float: left;
}
#center {
  margin-left: …
Run Code Online (Sandbox Code Playgroud)

html css

21
推荐指数
2
解决办法
1360
查看次数

垂直和Horizo​​natally中心主要包裹div

可能重复:
如何在DIV中居DIV?

现在我试试

<html>
<head>

        <title>?????????????????</title>
        <style type="text/css">   
    body
    {

            margin-left: auto;
            margin-right:auto;
    }

    #wrap
    {
            background: black;
            margin-left: auto;
            margin-right:auto;
            height:450px;
            width:450px;
            position:absolute;
            top:50%;
            right:50%;
            left:50%;
            margin-top:-225px;
         }
    </style>
</head>
<body>
        <div id="wrap">
                Hello
        </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

?????

html css

19
推荐指数
1
解决办法
6060
查看次数

div如何横向和纵向居中?

这是源代码:

<div id = "outer">
     <div id="top">
     ....
     </div>

     <div id="inner">
     ....
     </div>

     <div id="bottom">
     ....
     </div>     
</div>
Run Code Online (Sandbox Code Playgroud)

我想知道如何制作div(内部),水平和垂直中心?我可以横向居中,但不能做垂直中心......谢谢.

html css center

16
推荐指数
2
解决办法
6409
查看次数

div内的垂直对齐跨度

http://jsfiddle.net/UmHNL/2/

<div class="container">

    <span>Some text, yay</span>

</div>

<div class="container">

    <span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>

</div>
<style>
.container {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
}

.container span {
    padding-left: 30px;
}
</style>
Run Code Online (Sandbox Code Playgroud)

这个解决方案效果很好,直到屏幕宽度太小 - 将我的文本分成几行.

当我谷歌问题时,我发现了许多疯狂的过于复杂的解决方案,使用javascript和div来推送我的内容.任何人都可以帮助我在没有添加更多标记的情况下完成这项工作吗?:)

无需支持Internet Explorer和旧版浏览器.

谢谢

html css

16
推荐指数
2
解决办法
7万
查看次数

在div中垂直居中两个元素

我试图垂直居中两个<p>元素.

我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.

我会尝试其他的东西,但这里的大多数问题只是回到那个教程.

此代码段用于网页顶部的横幅广告.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p> …
Run Code Online (Sandbox Code Playgroud)

html css css3 centering flexbox

12
推荐指数
2
解决办法
5万
查看次数