我正在尝试将newsslider(在div底部容器中)放在此页面上:
http://www.luukratief-design.nl/dump/parallax/index.html
我已经有了 text-align: center;
它仍然无效.
有什么建议?
我想创建一个以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的实际宽度已知?
我们很多人今天都知道,上了年纪值display
像财产inline
和block
新的灵活盒模型已经在CSS3中被引入后,已经过时.但是,我们可能会在同一个灵活的盒子模型中在网络上找到不同的信息.
我们可能会发现主要存在3种不同的值display
,即财产flex
,box
和flexbox
.这三个灵活的盒子模型和使用哪一个有什么区别?
可能重复:
如何在DIV中居DIV?
请看下面的图片:
如何使灰色方块在红色容器div内水平居中?这都是用同位素制成的,所以请记住这一点.
提前致谢.
即使父(红色)div总是在中间对齐,灰色,较小的div也不是.在顶部图像中,当它们在一列中对齐时,该列应位于包装器(红色)div的正中间.
如何在我的页面中水平和垂直居中名为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) 我知道这个问题经常被问到,但我似乎永远无法让它发挥作用.你能告诉我什么是错的吗?
我在#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)可能重复:
如何在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)
?????
这是源代码:
<div id = "outer">
<div id="top">
....
</div>
<div id="inner">
....
</div>
<div id="bottom">
....
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我想知道如何制作div(内部),水平和垂直中心?我可以横向居中,但不能做垂直中心......谢谢.
<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和旧版浏览器.
谢谢
我试图垂直居中两个<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)