天道酬勤,学无止境

如何将两个图像水平和垂直居中?(How to horizontally and vertically center two images on top of each other?)

问题

我试图将两个图像放在彼此的顶部,两个图像水平和垂直居中在它们的容器内。

其中一张图像将具有不透明度动画以显示下面的图像。

图像大小相同,但我事先不知道图像的大小。 我也想用纯 CSS 和 HTML 来做到这一点。

这就是我的结果。

 .data-box{ border: 2px solid #d4d4d4; border-radius: 3px; display: flex; height: 120px; margin: 5px; margin-bottom: 10px; margin-right: 10px; padding: 0; position: relative; width: 120px; } .logo { align-items: center; display: flex; justify-content: center; margin: auto; position: relative; } .data-name { position: absolute; width: 100%; height: 23px; bottom: 0px; right: 0px; background: rgba(200, 200, 200, 0.3); } span { position: absolute; width: 100%; bottom: 2px; text-align: center; } img { position: absolute; }
 <div class="data-box"> <div class="logo"> <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> </div> <div class="data-name"><span>Flickr</span></div> </div>

我使图像position: absolute使它们离开浏览器的正常流程并直接呈现在彼此之上而不是彼此相邻。

这在 Chrome 中正常工作,但在 Firefox 和 Safari 中,图像的左上角水平和垂直居中:

如何水平和垂直居中这些图像,同时仍然让它们直接在彼此之上渲染?

回答1

我认为您根本不需要 flexbox:

 .data-box {position:relative; display:inline-block;} .logo {position:relative;} .color-image {position:absolute; top:0; left:0; bottom:0; right:0; opacity:0.5;} .data-name {position:absolute; left:0; right:0; bottom:5px; text-align:center;}
 <div class="data-box"> <div class="logo"> <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> </div> <div class="data-name"><span>Flickr</span></div> </div>
回答2

解决方案

将此添加到您的代码中:

img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

 .data-box { border: 2px solid #d4d4d4; border-radius: 3px; display: flex; height: 120px; margin: 5px; margin-bottom: 10px; margin-right: 10px; padding: 0; position: relative; width: 120px; } .logo { align-items: center; display: flex; justify-content: center; margin: auto; position: relative; } .data-name { position: absolute; width: 100%; height: 23px; bottom: 0px; right: 0px; background: rgba(200, 200, 200, 0.3); } span { position: absolute; width: 100%; bottom: 2px; text-align: center; } img { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); }
 <div class="data-box"> <div class="logo"> <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> </div> <div class="data-name"><span>Flickr</span> </div> </div>

解释

尽管将元素设置为position: absolute会将其从正常流中移除,但它实际上并未将其定位到任何位置。

CSS 偏移属性( topbottomleftright )的初始值是auto ,它将绝对定​​位的元素保持在它通常位于文档流中的位置。 如您所见,当未定义偏移量时,浏览器行为会有所不同。

有关上述代码如何工作的说明,请参阅此帖子:元素不会保持居中,尤其是在重新调整屏幕大小时

回答3

你可以在div中设置img,并将后面的图像设置为div的背景吗?

回答4

这不是最优雅的解决方案,但这有效:

img {
  position: absolute;
  transform: translate(-50%, -50%);
}
回答5

我会尽量切入正题。 这是一个将两个图像集中在父级中的示例。

 <html> <head> <title>Exemple</title> <style type="text/css"> .parent{ margin: auto auto; width: 500px; height: 500px; border: 3px solid #ccc; } .child1, .child2{ width: 50%; height: 50%; margin: 25%; background-color: rgb(226,26,60); } .child1{ opacity:0.5; } </style> </head> <body> <div class="parent"> <img class="child1" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> <img class="child2" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt=""> </div> </body> </html>

使用带百分比的边距在父 div 的中间对齐两个图像。 在这里,我将 with 和 height 设置为 50%,这意味着还剩下 50%。 这就是为什么你将边距设置为 25%,所以他把它放在父级的中间。

祝你好运

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何在更大的div内使图像中心(垂直和水平)居中[重复](How to make an image center (vertically & horizontally) inside a bigger div [duplicate])
    问题 这个问题已经在这里有了答案: 如何在div内垂直对齐图像(36个答案) Flexbox:水平和垂直居中(13个答案) 如何在div中垂直对齐元素? (28个答案) 如果图像比其容器宽,如何居中? (9个答案) 1年前关闭。 我有一个div 200 x 200像素。 我想在div的中间放置一个50 x 50像素的图像。 如何做呢? 我可以通过使用text-align: center div的text-align: center使其水平居中。 但是垂直对齐是个问题。 回答1 就个人而言,我将其作为div中的背景图像放置,其CSS为: #demo { background: url(bg_apple_little.gif) no-repeat center center; height: 200px; width: 200px; } (假设您已经指定height和width并添加background ,则id="demo"的div应该不是问题) 让浏览器承受压力。 回答2 在旧的浏览器中工作(IE> = 8) 绝对位置与自动边距相结合,可使元素在水平和垂直方向上居中。 元素位置可以基于使用相对定位的父元素位置。 查看结果 img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
  • 文字在响应图像上垂直和水平居中(Text vertically and horizontally centered over a responsive image)
    问题 我希望在页面变宽时会越来越大的图像上垂直和水平居中放置文本。 我最初将图像设置为固定高度div的背景,在这种情况下,将其居中相对容易,但是由于背景图像不是结构化的,因此我无法将高度设置为宽度,当我去寻求更灵敏的设计时,我不得不放弃这个选择。 因此,我目前有一个div,其中包含两个元素,即img和覆盖文本。 图像宽度设置为其容器宽度的100%,并且高度相应地变化。 但是,结果是,我无法将覆盖文字设置为postion :absolute和top:80px之类的,因为与顶部的距离必须有所不同。 甚至执行top:25%或其他都不起作用,因为a)如果页面宽度缩小以挤压文本,或者如果文本过多,则在行数更多/更少的情况下,垂直居中将被丢弃,并且b )百分比是任意的-它不是50左右,因为当我希望覆盖的中心位于文本叠加层的顶部时,它会将图像叠加层的顶部降低50%。 我看过这篇文章,其中的文章肯定很接近,但是在这两种解决方案中,图像高度都无法调整大小,在前一种情况下,JS在页面加载时加载,但是随后冻结,因此如果我更改页面的宽度/高度,事情就会变得一团糟。 理想情况下,此解决方案不仅仅因为这个原因就不会涉及JS(即使每次调整大小都重新加载JS时,这也不理想),但是如果这是唯一的解决方案,我就接受。 另外,为了增加细节/乐趣,我在图像上设置了最大高度,因为即使在电影院的显示器上
  • 如何在div块内(水平和垂直)居中放置文本?(How can I center text (horizontally and vertically) inside a div block?)
    问题 我将div设置为display:block ( height和width 90px ),并且里面有一些文本。 我需要文本在垂直和水平方向的中心对齐。 我尝试了text-align:center ,但是它没有做水平部分,所以我尝试了vertical-align:middle ,但是没有用。 有任何想法吗? 回答1 如果是一行文本和/或图像,则很容易做到。 只需使用: text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */ 而已。 如果可以是多行,那么它会稍微复杂一些。 但是在http://pmob.co.uk/上有解决方案。 查找“垂直对齐”。 由于它们往往是骇客或添加复杂的div ...我通常使用带有单个单元格的表来实现它...使其尽可能地简单。 2020年更新: 除非需要使它在早期的浏览器(例如Internet Explorer 10)上运行,否则可以使用flexbox。 当前所有主流浏览器均广泛支持该功能。 基本上,需要将容器指定为弹性容器,并沿其主轴和横轴居中: #container { display: flex; justify-content: center; align-items: center; }
  • Twitter Bootstrap-如何将元素水平或垂直居中(Twitter Bootstrap - how to center elements horizontally or vertically)
    问题 有什么办法可以将html元素垂直或水平居中放置在主要父对象中? 回答1 更新:虽然这个答案早在2013年初就可能是正确的,但现在不再使用。 正确的解决方案使用偏移量。 至于其他用户的建议,也可以使用本机引导程序类,例如: class="text-center" class="pagination-centered" 感谢@Henning和@trejder 回答2 从Bootstrap文档中: 设置要display: block的元素display: block和通过margin居中。 可作为mixin和class。 <div class="center-block">...</div> 回答3 对于此问题的未来访问者: 如果您尝试将div中的图像居中,但该图像无法居中,则可以描述您的问题: jsFiddle DEMO的问题 <div class="col-sm-4 text-center"> <img class="img-responsive text-center" src="myPic.jpg" /> </div> img-responsive类将display:block指令添加到image标记,这将阻止text-align:center ( text-center类)正常工作。 解决方案: <div class="col-sm-4"> <img class="img
  • div中的中心图标-水平和垂直[重复](Center icon in a div - horizontally and vertically [duplicate])
    问题 这个问题已经在这里有了答案: 如何水平和垂直居中放置元素(23个答案) 6年前关闭。 我在父div中将图标(垂直和水平)居中时遇到问题。 我的页面上有许多不同大小的父divs ,因此我希望能够将图标按比例放置在每个父div的中心。 这是问题的JSFiddle: JsFiddle 的HTML <div class="img_container"> <i class="icon-play-circle"></i> </div> <br> <div class="img_container2"> <i class="icon-play-circle"></i> </div> 的CSS .img_container{ width:100px; height:100px; position:relative; background:red; } .img_container2{ width:100px; height:50px; position:relative; background:blue; } .icon-play-circle{ position:absolute; top:45%; left:45%; color: white; } 回答1 由于它们已经是inline-block子元素,因此您可以在父元素上设置text-align:center
  • html中的水平和垂直居中文字[重复](Horizontal and vertical center text in html [duplicate])
    问题 这个问题已经在这里有了答案: 如何水平和垂直居中放置元素(23个答案) 6年前关闭。 我有一个div,其背景图像需要水平和垂直居中。 在该图像的顶部,我还想显示一个1行文本,该文本在水平和垂直方向上也居中。 我设法使图像居中,但文本未垂直居中。 我以为vertical-align:middle可以解决问题。 这是我的代码: <div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;"> <div style="color:#ffffff; text-align: center; vertical-align:middle;" > Some text here. </div> </div> 有任何想法吗? 解决方法:我实际上是通过使用表来完成此工作的。 (我可能会被HTML社区诅咒。)是否有重要的理由不使用此btw? 我仍然对使用div的解决方案感兴趣。 <table width="100%" height="100%"> <tr> <td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;"
  • 在图像上垂直和水平居中文本(Vertically and horizontally centering text over an image)
    问题 我想要一个大图像,宽度为 100%,高度约为屏幕的 70%。 在这张图片上,我想在这张图片上放一些文字,并且这个文字需要放在图片的中间。 简而言之:如何在 100% 宽度的图像中将文本水平和垂直居中? : <div id="top-area"> <img src="img/startphoto.jpg" alt="background image #1" /> <p>Some text</p> </div> #top-area img{ width: 100%; position: absolute; top: 0px; left: 0px; } #top-area p{ position: relative; text-align: center; margin-top: 330px; color: white; font-family: 'Montserrat', sans-serif; font-size: 3em; } 我知道我使用 margin-top 来获得文本的水平位置,但这感觉像是错误的方式。 有人有更好的建议吗? 回答1 您可以将position:absolute分配给img和p元素。 然后你会声明top:40%; 在p元素上垂直居中。 我使用40%的原因是由于您使用的文本大小。 您可以使用50%然后使用 javascript
  • 如何水平和垂直对齐内联块(How to align an inline-block horizontally and vertically)
    问题 使用CSS将#dates div与标题右侧对齐并垂直居中对齐的最佳/最干净的方法是什么。 我试过float: right ,但这不允许vertical-align 。 我想避免使用浮动,所以我使用inline-block ,并使用相对定位。 有没有更正确的方法? 我不喜欢这样的事实,即我必须做一个 30 像素的顶部,并使用反复试验直到它居中。 <div id="header"> <a id="logo" href="~/" runat="server"> <img src="Images/Interface/logo.png" alt="logo" /> </a> <div id="dates"> <div id="hijri-date">2 Ramadhaan, 1435 AH</div> <div id="gregorian-date">Sunday 29 June 2014</div> </div> </div> #header { background-color: white; padding: 15px; position: relative; } #logo { display: inline-block; vertical-align: middle; } #logo img { vertical-align: bottom; /* to get rid of
  • 尽管用户屏幕大小,我如何确保我的容器水平和垂直居中?(How can I ensure that my container is centered horizontally and vertically despite user screen size?)
    问题 我对前端开发人员比较陌生,所以我对如何去做这件事有点迷茫。 我创建了一个包含滑块和一些图像的容器。 我的主管有一个巨大的屏幕,因此显然屏幕底部会有空白空间。 所以他不想那样。 相反,他希望容器根据用户屏幕的大小水平和垂直居中。 我怎样才能用尽可能少的代码正确地做到这一点? 我相信有 jQuery 插件,但想看看是否有更好的方法,或者这样做是否有意义? 回答1 由于 CSS 的基于流的特性,如果没有 Javascript,这只能在居中元素的垂直大小固定时完成,通过在固定容器内应用position:absolute' and top:50%`,然后使用负数用于抵消容器的边距。 单击此处获取 JSFiddle 示例。 或者,使用display:table-cell也可以达到相同的效果,但这有点混乱并且失去了很多灵活性。 示例已在此处的其他答案中提供,因此我会省力:) 回答2 您可以使用vertical-align属性轻松完成。 由于垂直对齐仅在表格单元格中以所需的方式工作,因此具有display属性的这个技巧可以为您提供所需的效果。 #yourDiv { // give it a size width: 100px; height: 100px; margin: 0 auto; } html, body { height: 100%; width: 100%; padding: 0
  • 使用CSS将图片垂直和水平居中(Center an Image vertically and horizontally using CSS)
    问题 不知道图像尺寸时如何垂直和水平居中? 我问了这个问题,有人建议使用桌子。 这不是我第一次听到桌子能做到这一点,但我没有运气就尝试过。 仅当我知道图像的大小时,搜索SO才得到我的结果。 我该如何用桌子呢? 注意:JavaScript / jQuery不是首选,但是如果有解决方案,我可以接受。 回答1 很简单,这是我所有图像/容器的格式: <div class="photo"><img /></div> <style type="text/css"> div.photo { height: 100px; line-height: 100px;text-align:center; } div.photo img { vertical-align:middle;} </style> 回答2 CSS方法 您可以在容器上设置显式的高度和线高,以使图像居中: <div id="container"> <img src="http://placekitten.com/200/200" /> </div> <style> #container { height: 600px; line-height: 600px; text-align: center } #container img { vertical-align: middle } </style> 实际观看:http:/
  • CSS flexbox垂直/水平居中放置图像,而无需显式定义父级高度(CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height)
    问题 如下所示,仅使用父div和子img元素,如何在未明确定义父div height下将img元素垂直和水平居中? <div class="do_not_define_height"> <img alt="No, he'll be an engineer." src="theknack.png" /> </div> 我对flexbox不太熟悉,所以可以,如果flexbox本身可以填满整个高度,但不能填满其他不相关的属性。 回答1 只需将以下规则添加到父元素: display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ 这是一个示例演示(“调整大小”窗口以查看图像对齐) 如今,浏览器对Flexbox的支持非常好。 为了实现跨浏览器的display: flex兼容性display: flex和align-items ,您还可以添加旧的flexbox语法: display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align
  • 将图像居中放置在 div 中。 水平和垂直 [关闭](Center an image inside a div. Horizontally and vertically [closed])
    问题 关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其仅通过编辑这篇文章来关注一个问题。 3年前关闭。 改进这个问题 我认为这个问题已经被问过很多次了,但我现在已经在网上搜索了一整天,找不到一个好的解决方案。 我想将图像居中放置在 div 中,使其看起来像一个框架。 我有不同大小的图像,有些是肖像,有些是风景。 我希望它们水平和垂直居中,并且如果尺寸较大,它不会溢出容器。 现在我已经阅读了有关 div 与表格设计的信息,但说真的,现在我只想完成工作,因此将不胜感激任何解决方案。 回答1 检查演示 - http://jsfiddle.net/x6jDu/ table-cell 支持 IE8+ 回答2 您可以通过单击下面的演示链接来实现它: 演示http://jsfiddle.net/rathoreahsan/99BXT/ 笔记: 缺点:通过使用display:table-cell将无法在 Internet Explorer 8 浏览器下工作,其他浏览器将除外。 优点:它也可以通过使用固定宽度和固定高度来工作。 优点:通过使用display:block将适用于所有浏览器。 缺点它不能通过使用固定宽度和固定高度来工作。 但是您可以使用本演示中提到的(顶部,右侧,底部,左侧)相同的padding来管理它
  • XCode 7 自动布局约束:如何使 2 个图像水平居中(XCode 7 Autolayout Constraints: How to make 2 images stay horizontally in the center)
    问题 我试图在屏幕中央并排放置 2 个 UIImage 视图。 如果它只是 1 个 UIImage,我可以将它们设置为在容器中垂直和水平居中。 如果我并排有 2 个 UIImage 视图,我只能将其设置为垂直居中,但不能将其设置为水平居中,因为两个 UIImage 视图会相互叠加。 有人可以指导我吗? 感谢并非常感谢! 回答1 看一个视图,将两个图像都放在该视图中。 根据您制作的视图(视图的边缘到边缘)添加对这些图像的约束。 现在添加关于超级视图的视图约束。 (垂直和水平居中)。 就是这样! 回答2 解决这个问题的一个优雅的方法是在UIImageView本身上应用约束。 现在想想,如果你需要有两个形象的看法superview's中心,然后一个imageView应该有它的trailing缘在中心superview和另外应该有一个leading在中心边缘。 Control-Click上imgvLeft并将其拖动到superview ,你会看到一些约束选项选择; 选择trailing缘约束。 现在转到该约束并单击它,您将看到如下图所示的详细信息。 将second item从trailing更改为centreX并保持常量 0。 同样,您可以在imgvRight上应用leading约束并将second item更改为centreX 。 现在,如果您希望在两个视图之间保持一定距离
  • 调整图像大小以适应 div + 保持比例 + 水平和垂直居中 + 圆角(resize image to fit in a div + keep ratio + centered horizontally and vertically + rounded corners)
    问题 问题: 调整图像大小以适合 div - 已解决保持比例 - 已解决水平和垂直居中 - 已解决圆角 a) 矩形图像 - 已解决 b) 横幅图片 - !!! 不可能!!! 所以问题是:如何去除图像的矩形角? 请看这里看问题: >>> http://jsfiddle.net/infoman/5fzET/3/ <<< 换句话说:图像的角是圆的,但它们不是在 div 的末尾而是在它之外。 我需要将图像在 div 结束的行处四舍五入。 HTML test image ratio w/h = 4 <div> <img id="myimg" src='http://placehold.it/200x50' draggable="false"/> </div> <br/> test image ratio w/h = 0.25 <div> <img id="myimg" src='http://placehold.it/50x200' draggable="false"/> </div> <br/> test image ratio w/h = 1 but small <div> <img id="myimg" src='http://placehold.it/50x50' draggable="false"/> </div> <br/> test image ratio w/h = 1
  • 使用float:left在DIV中垂直和水平居中放置图像?(Center image vertically and horizontally inside of DIV with float:left?)
    问题 我需要一个可行的解决方案来完成琐碎的任务,即将float:left用于将图像放置在行中时,将不同尺寸的图像居中到方形div,我在div内使用div来完成技巧: .outer-element{ //wrap tile div display:table-cell; width:300px;height:300px; text-align:center ; vertical-align:middle ; float:left; margin-bottom:15px; } .inner-element{ //div with image inside display:inline-block; } 但是我必须使用use float:left将外部元素放入行中,当我这样做时图像未垂直居中(它们与div的顶部边框对齐)时,我尝试了其他一些CSS代码,但float:left总是使图像生成不垂直居中。 回答1 删除float:left; 从.outer-element因为它与表格单元格显示内容的方式存在冲突。 如果需要将容器向左浮动,请将.outer-element放在另一个向左浮动的容器中。 的HTML <div class="fl"> <div class="outer-element"> <div class="inner-element"> <img src="http:/
  • CSS:如何垂直和水平对齐图像?(CSS: how to vertically and horizontally align an image?)
    问题 我的页面有一个图像空间,可以是最大 100x100 的图像。 用户可以上传任何尺寸的图像,Web 应用程序将调整其大小,保持纵横比,达到 100x100。 因此,可以将图像大小调整为 75x100 或 100x75 等。 无论调整后的图像尺寸如何,我都希望它在网页上分配的空间中垂直和水平居中显示。 我如何在 CSS 中做到这一点? 我是否需要一个包含 div,如下所示: <div class="image_container"> <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/> </div> 无论如何,示例 CSS 会有所帮助。 谢谢! 回答1 试试这个 - http://jsfiddle.net/zYx4g/ 这将适用于任何尺寸和所有浏览器的图像。 .image_container { width: 300px; height: 300px; background: #eee; text-align: center; line-height: 300px; } .image_container img { vertical-align: middle; } ​ 回答2 我知道这是老问题,但现在你可以使用 flex <div class="container"> <img
  • 垂直和水平居中 div 中的图像(center an image in div vertically and horizontally)
    问题 我发现我的 tuts 关于水平和垂直居中图像。 但它不起作用。 我的代码是 #parent { position : relative; float : left; width : 700px; height : 400px; overflow : hidden; background-color: black; } #parent img { max-height :400px; max-width : 700px; } 图像的高度和宽度是动态的。 回答1 像这样写: #parent { position : relative; float : left; width : 700px; height : 400px; overflow : hidden; background-color: black; text-align:center; line-height:400px; } #parent img { vertical-align:middle; } 检查这个 http://tinkerbin.com/XYKUzvXu 更新 检查这个 http://tinkerbin.com/GL4GaNfo 回答2 你应该有 text-align: center 在#parent 样式上水平对齐图像,如果我没记错的话,您也可以在父样式上设置它: line-height
  • 如何在TextView中将文本水平和垂直居中?(How do I center text horizontally and vertically in a TextView?)
    问题 如何在TextView水平和垂直居中放置文本,以使其准确显示在Android TextView的中间? 回答1 我假设您正在使用XML布局。 <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/**yourtextstring**" /> 您也可以根据需要使用重力center_vertical或center_horizontal 。 就像@stealthcopter在Java中评论的那样: .setGravity(Gravity.CENTER); 回答2 android:gravity="center" 这将解决问题 回答3 您还可以使用以下方法动态设置它: textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.CENTER_HORIZONTAL); 回答4 android:layout_centerInParent="true" 与RelativeLayout一起使用时,该布局的高度和宽度均设置为wrap_content。 回答5 您也可以使用以下组合: android:gravity="left|center"
  • Flexbox:水平和垂直居中(Flexbox: center horizontally and vertically)
    问题 如何使用flexbox在容器内水平和垂直居中div。 在下面的示例中,我希望每个数字都在彼此下方(按行),并水平居中。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span class="flex-item">2</span> </div> <div class="row"> <span class="flex-item">3</span> </div> <div class
  • 风俗图像/字符居中(Custom <hr> with image/character in the center)
    问题 我想重新创建此水平规则: 我有双线,但是我不确定如何在中心获得某种字符或图像。 我在想也许可以使用:before和:after,但是在这种情况下我不知道如何利用它们。 为了回答这个问题,让我们尝试使中心字符成为一个字符。 稍后我将找出图像/图标。 有想法吗? 这是我的代码行: hr { display:block; height:1px; border:0; border-top:1px solid #444; border-bottom:1px solid #444; margin:25px 0px; } 回答1 这是我能够制作的屏幕截图。 可以在jsfiddle.net上查看它的运行情况。 这是CSS: body { background: #454545; } hr { font-family: Arial, sans-serif; /* choose the font you like */ text-align: center; /* horizontal centering */ line-height: 1px; /* vertical centering */ height: 1px; /* gap between the lines */ font-size: 1em; /* choose font size you like */ border-width