标签: centering
如何将未知宽度的绝对定位内容居中？
在有人问我为什么要这么做之前,让我直接告诉你.那样你们其中一个聪明的偷看就可以告诉我一个更好的方法......
我正在制作一个能够拉伸以填充页面的绘画的观察者,准确地说是屏幕高度的90%.我想把画作一个接一个地淡化,并希望将它们中心放在画面中间.
为了让画作相互褪色,我需要将它们定位为"绝对"以阻止它们堆叠.这就是问题所在.自从我将它们设置为绝对值之后,我使用的每个方法都将包含div放在中心位置.
部分问题是我没有为绘画设置任何宽度,因为我希望它们动态调整自己的大小以填充用户屏幕的90%.
我发现了数百种用于集中绝对内容的方法,并且相信我可能需要缩小包含div的内容.但是我还没有取得任何成功.
HTML的
<div id="viewer_div">
<img src="" id="first" />
<img id="second" class="hidden"/>
</div>
样式表
#viewer_div {
width:1264px;
}
img {
height:90%;
display:block;
margin-left: auto;
margin-right:auto;
}
上面给出了我想要的效果,但是不允许我将图像置于绝对位置.任何人都可以建议一种中心图像的方法,但也允许我淡化一个在另一个上面？
推荐指数
解决办法
查看次数
为什么flex-child限于父母大小？
考虑以下示例......
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
width: 150%;
}<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget …推荐指数
解决办法
查看次数
Twitter Bootstrap 2.0中的中心导航栏
假设我们使用Twitter Bootstrap 2.0为导航栏设置了以下标记.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
.nav内心居中的最佳方式是什么navbar-inner？
我只是想出了我自己的CSS样式:
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
navigation css3 centering responsive-design twitter-bootstrap
推荐指数
解决办法
查看次数
将一个情节集中在一个流动的流体中
我有一个fluidRow,其中一个列在一个列中呈现.我想知道当我通过renderPlot({create plot here},width = ##)函数手动指定绘图宽度时如何使绘图居中(因此,它不占用列的整个宽度) .
ui.R代码:
setwd("C:/Users/Nate/Documents/R Working Directory/appFolder/example")
shinyUI(fluidPage(
titlePanel("Test"),
sidebarLayout(
sidebarPanel(
p('stuff here')
),
mainPanel(
tabsetPanel(id = 'tabs1',
tabPanel("main",
fluidRow(
column(8,
plotOutput('plot1')),
column(4,
p('2nd column'))),
fluidRow(
p("2nd row of viewing area"))
),
tabPanel("second",
p("main viewing area")),
tabPanel("third",
p('main viewing area')
)
))
)
))
server.R代码:
shinyServer(function(input, output, session) {
output$text1 = renderText({
paste("text output")
})
output$plot1 = renderPlot({
x = runif(10,0,10)
y = rnorm(10)
plot(x,y)
}, width = 300)
})
推荐指数
解决办法
查看次数
无序列表中多行列表项的水平居中
我有一个包含在第二行的无序列表,需要在包含UL的内部水平居中.每个LI是设定的宽度和高度.我已经看到很多方法适用于单行,但是当列表包含到第二行时,我没有尝试过任何工作.如果这在IE7 +中工作将是理想的 - 感谢您的帮助.
请看这里的插图:
推荐指数
解决办法
查看次数
如何将CenterParent转换为非模态形式
我有一个非模态子表单,从父表单打开.我需要将子表单居中到其父表单.我已经设置了子表单的属性CenterParent并尝试了这个:
Form2 f = new Form2();
f.Show(this);
但无济于事.这适用于模态形式,但非模态形式则不然.任何简单的解决方案,还是需要我通过所有数学计算来确定其位置为中心？
推荐指数
解决办法
查看次数
将div定位到可见区域的中心
我正在为邮件列表注册制作灯箱式弹出窗口,但我希望弹出窗口位于可见页面的中心,而不仅仅是整个文档的中心; 如果用户滚动到页面底部并单击以进行注册,我希望它显示在屏幕的中央.
我假设jQuery/JS将是最好的方法; 这是我当前的CSS代码,它运行得相当好,但div需要动态地推入可见空间以用于较小的屏幕.
.my-div{
width:960px;
height:540px;
position:absolute;
top:50%;
left:50%;
margin-left:-480px;
margin-top:-270px;
z-index:60;
display:none;
}
推荐指数
解决办法
查看次数
如何在Zurb Foundation中垂直居中？
我正在构建一个登录表单,我希望屏幕中间的用户名和密码字段为square.我也在使用Zurb Foundation软件包来构建这个表单.我在垂直居中的过程中遇到了很多麻烦.
这是我的代码:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
Registration
</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" …推荐指数
解决办法
查看次数
在弹性框中左对齐,居中和向右对齐元素
我正在尝试使用flexbox创建这个顶部标题.
基本上我想将<div class="header-title">(机构机构1)与你看到的其他3个元素联系起来.(Institutioner,Ledere和Log ud)就像你在图像上看到的那样.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li><a href="/institutions/">Institutioner</a></li>
<li>
<a href="/leaders/">Ledere</a>
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>推荐指数
解决办法
查看次数
Raphael js文本定位:将文本居中放在一个圆圈中
我正在使用Raphael js绘制带圆圈的数字.问题是每个数字都有不同的宽度/高度,因此使用一组坐标使文本居中不起作用.文本在IE,FF和safari之间显示不同.有没有动态的方法来找到数字的高度/宽度并相应地居中？
这是我的测试页面:
http://jesserosenfield.com/fluid/test.html
和我的代码:
function drawcircle(div, text) {
var paper = Raphael(div, 26, 26); //<<
var circle = paper.circle(13, 13, 10.5);
circle.attr("stroke", "#f1f1f1");
circle.attr("stroke-width", 2);
var text = paper.text(12, 13, text); //<<
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text.attr("fill", "#f1f1f1");
}
window.onload = function () {
drawcircle("c1", "1");
drawcircle("c2", "2");
drawcircle("c3", "3");
};
非常感谢!
推荐指数
解决办法
查看次数
标签 统计
centering ×10
css ×6
css3 ×2
flexbox ×2
html ×2
c# ×1
css-position ×1
formatting ×1
forms ×1
html-lists ×1
javascript ×1
jquery ×1
list ×1
navigation ×1
parent-child ×1
plot ×1
r ×1
raphael ×1
shiny ×1
winforms ×1