我正在试图找到一种方法来垂直居中我的SVG标签.
基本上,这是一个简化的SVG代码,我试图集中:
<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
<g id="1" style="font-size: 0.7em;">
<image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
</g>
</g>
</svg>
我可以毫不费力地将它放在页面的中间(水平方向),但是我希望它也可以垂直居中.
我可以添加包装器,但我想知道这样做的通用方法,不依赖于SVG大小和窗口大小.
我尝试了多种方法,但没有任何效果.
谢谢,
我试图垂直居中两个<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;
}<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p> …我的网站登录页面的ContainerDIV具有100%的高度和宽度.我能够将InnerContainerdiv水平对齐,但我无法将其置于垂直中心.我改变了几个属性,结果大致相同.
我有http://jsfiddle.net/cwkzq/12/的相同例子,我不知道我做错了什么.我很感激这方面的帮助.
CSS代码
html, body,form { height: 100%; }
body { margin: 0; padding: 0; border: 1; background-color:Aqua; }
.Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green;
vertical-align: middle; }
.InnerContainer
{ vertical-align: middle; width: 400px;height: 350px; border-left:1px solid;
border-right:1px solid; border-color:#f5f5f5;margin: 0 auto; padding: 0;
font-size: 12px; background-color:Red;
}
HTML代码
<!-- Container -->
<div class="Container">
<div class="InnerContainer">
<!-- TopMenu Bar -->
<div class="colorBar">
</div>
<!-- TopMenu Bar …我想要一个垂直和水平居中的 div，即位于页面的中心。我尝试了position:absolute并将div的右上角左下角设置为0！但问题是，当我放大页面时，它与其他标题和其他 div 重叠！请帮我！如何在放大页面时将 div 定位在页面中心而不与其他 div 重叠？
就像我尝试过的那样：
.center{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
我有一个div模拟小微调器的块，一切正常，但是css我的配置位于右上翼，我试图将它居中，但是当我从移动设备上看到它时，它从原地移动..可以在不改变不同尺寸设备中的位置的情况下将其居中吗？
.spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
我有一个包含ASP.NET表单的弹出窗口,单击"请求信息"链接,将出现该表单.
但是,具有触发弹出窗口的"请求信息"链接的页面具有大量内容,因此需要滚动才能看到该链接.
div如果用户滚动阅读内容,我需要始终居中,否则如果他们不滚动弹出窗口仍然显示在屏幕中心.
在div绝对定位,整个页面宽度960px与边距设置为0 auto.
有没有一种CSS方法可以在body元素中垂直对齐我的div？
事情是我的div每次都会有不同的高度,所以它不是恒定的.
这些是我尝试过但他们不工作的东西:
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
我在这里尝试了所有解决方案，但没有一个奏效。无论窗口大小如何，我都想水平和垂直居中。
注意：我container按照我想要的方式拥有我的div。它环绕着其他几个 div。如果我调整此链接建议的更改，我的容器 div 就会搞砸。我不是在尝试让它有反应。它是一个固定大小（想想一个图像），我只希望它始终位于窗口的中心，无论窗口大小如何。
这是我所拥有的：
* {
margin: 0;
padding: 0;
}
#container {
background-color: black;
border-radius: 10px;
padding: 5px;
display: block;
margin: auto;
/* changed to auto, didn't make a difference*/
border-width: 1px;
border-color: black;
border-style: solid;
position: absolute;
}
.light {
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
margin: 10px;
border-width: 5px;
background-color: grey;
}<body>
<div id="container" onclick="changeColor()">
<div id="green" class="light"></div>
<div id="yellow" class="light"></div>
<div id="red" class="light"></div>
</div>
</body>我是Semantic-UI-React框架的新手,最近遇到了一个我似乎无法解决的问题.我在我的主页上有一个登录和注册模式.触发"登录和注册"按钮后,弹出"模态".但是,我不能让它出现在页面的中心.它位于页面顶部,部分切断.我该怎么做呢？预先感谢您的帮助!
我想将我的表格居中在它所在的水平行的中心。我认为这很简单
#control {
text-align: center;
}
我要居中的元素是
<div id="control" class="btn">
<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>
<span>Start</span>
</div>
但是，该元素仍未居中 - https://jsfiddle.net/xwdnvcy5/58/。我没有得到什么非常明显的东西，但我无法说出它是什么。
我在全屏显示的另一个div中垂直和水平居中放置div时遇到问题。子div的宽度和高度是固定的。
这是代码：
html, body {
height: 100%;
margin: 0;
}
#header {
overflow: hidden;
width:100%;
height: 100%;
background: orange;
background-size:cover;
-webkit-background-size:cover;
display: table;
}
#wrap {
height: 200px;
width: 500px;
background:white;
margin:0px auto;
}<div id="header">
<div id="wrap">
<h1>Header</h1>
<div id="some-text">Some text some text some text some text</div>
</div>
</div>如何在Html或javascript代码的帮助下将结果显示在页面中间.正如你们在搜索页面中看到谷歌一样.我把我的结果放在顶级中心,但我想在中间像谷歌页面.我的Html代码是:
<html>
<head>
<title> Search</title>
<body>
<center>Search: <input type="Text" Name="">
<input type="Submit" value="Go"></center>
</body>
</html
css ×9
html ×9
center ×3
centering ×2
css-position ×2
css3 ×2
html5 ×2
javascript ×2
flexbox ×1
php ×1
python ×1
reactjs ×1
semantic-ui ×1
svg ×1
text-align ×1