CSS无法对齐绝对位置的img的垂直/水平
CSS无法对齐绝对位置的img的垂直/水平。 这个问题通常出现在CSS中使用了绝对定位（absolute positioning）的图片（img）元素，而无法实现对其垂直/水平对齐的效果。解决这个问题可以尝试以下方法：
- 使用相对定位（relative positioning）：将图片的父元素设为相对定位，然后使用top、bottom、left、right属性进行微调，以实现对其的垂直/水平对齐。例如：
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="parent">
<img src="your-image-src" class="child">
</div>- 使用Flexbox布局：将图片的父元素设为flex容器，使用align-items和justify-content属性进行垂直和水平对齐。例如：
<style>
.parent {
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
}
</style>
<div class="parent">
<img src="your-image-src">
</div>- 使用Grid布局：将图片的父元素设为grid容器，使用place-items属性进行垂直和水平对齐。例如：
<style>
.parent {
display: grid;
place-items: center; /* 垂直和水平居中对齐 */
}
</style>
<div class="parent">
<img src="your-image-src">
</div>- 使用CSS的transform属性：使用translate属性进行位移调整，以实现对其的垂直/水平对齐。例如：
<style>
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="parent">
<img src="your-image-src" class="child">
</div>对于以上解决方法，可以根据具体情况选择适用的方式。希望这些解决方案能帮助到您。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：腾讯云的云服务器产品，提供稳定、安全、高性能的云计算服务。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：腾讯云提供的强大、安全、稳定、低成本的云端对象存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云容器服务（TKE）：腾讯云提供的容器化部署和管理服务，帮助用户快速构建、部署和扩展应用程序。详情请参考：https://cloud.tencent.com/product/tke
相关·内容
2回答
我正在寻找最好的方式垂直对齐CSS。我的经验是，这是一个未很好解决的问题:垂直对齐属性与HTML中的不一样。我需要一个代码，像边距:自动属性的水平方式。我现在使用的代码并不是无所不在的(例如: fadeIn对象)。下面是：
<div style="width:200px; height:100px; background:white; display:table">
<div style="display:table-cell; vertical-align:middle">
<img src="im
浏览 2提问于2010-11-25得票数 1
回答已采纳
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
5回答
我有一个简单的网站:固定宽度，可变高度，居中。我希望背景图像与内容的左下角对齐，如下所示：
----------------------------------------------------------
____________________________
| <- 960px -> |
| |
| |
浏览 1提问于2010-06-21得票数 1
回答已采纳
1回答
有没有办法在引导网格中垂直对齐( align -items: center;)的列上显示一列？
与水平嵌套列相同，但使用垂直对齐时，如果有可能在不破坏引导功能的情况下对覆盖元素使用位置绝对，那就更好了。
<div class="row row-margin-bottom-100px">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div cla
浏览 8提问于2016-07-28得票数 0
回答已采纳
4回答
对齐三柱
、、
我想要一个像下面这样的布局--但是我现在得到了顶部的两个md列
img应在容器的中间垂直和水平对齐，md列应与img中心对齐
我不想要卷轴
`image div`
mid-6 mid-6
HTML:
<div class="container">
<div class="row">
<div class="inner">
<img src="assets/img/logo.jpg" w
浏览 0提问于2014-07-24得票数 0
回答已采纳
1回答
未知宽度的垂直对齐文本
、、、、
我在一篇通过Wordpress带来的文章中包含了文本div。(布局使用引导带3框架)当.linkage悬停时div会增大。一切都很好(以水平为中心，从文本的中心处生长)，除了与文章的顶部对齐之外。我尝试过各种垂直中心的方法，但似乎无法让它发挥作用。
HTML
<article class='col-md-12'>
<div class="bg-img" style="background-image:url('...');">
<a href="#" class
浏览 2提问于2015-06-12得票数 1
回答已采纳
2回答
我有一个列表的图像，我需要对齐中心的垂直和水平。如何使用jquery对齐各自li中心的图像？
在的演示。
html：
<ul id="snap-list">
<li class="snap">
<img src="http://placehold.it/350x150">
</li>
<li class="snap">
<img src="http://placehold.it/250x350"&g
浏览 1提问于2015-12-10得票数 1
回答已采纳
1回答
Img垂直对齐ul？
、、、
我想垂直对齐徽标图像到底部的我的导航菜单。我尝试过垂直对齐:文本底部，但是垂直对齐似乎不适合我，因为ul不像普通的p标记。有人能帮我吗？
<a href="index.php">
<img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50">
</a>
<ul i
浏览 2提问于2013-07-24得票数 0
回答已采纳
6回答
我在一个div里面有一个图像，我想把图像垂直地和水平地对齐，尝试不同的方法，比如使容器显示为表，图像作为表行等等。
这不是垂直对齐。
这是我的代码：
<div class="container">
<img src='images/img1.jpg' class="imgclass">
</div>
CSS：
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative
浏览 3提问于2014-05-22得票数 0
回答已采纳
1回答
我有一个具有相同代码的5个html页面。假设这是代码：
<div id='generic'>
</div>
所有5页链接到同一个外部CSS文件，即：
<style>
#generic {
width: 700px;
height: 500px;
}
</style>
在这5页中的每一页上，我都插入了一个表，如下所示
<div id='bottomBar'>
<table id='bottomTable'>
浏览 3提问于2013-11-07得票数 3
回答已采纳
4回答
在我的网页部分，我使用一个图标库。我在div中插入图像/图标，并通过css对齐中心(垂直和水平)进行管理。但我发现我的影像中心垂直对齐，而不是精确的中心在我的div中。请看我的代码和css。
css
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
align-items: flex-start;
}
#main div{
width: 70px;
height: 70px;
align-self: center;
background:r
浏览 7提问于2016-06-02得票数 0
2回答
我试图在窗口的div中对齐垂直和水平的文本，我希望它能够在iPhone上的纵向和横向模式上工作。这是我的代码，但效果不太好。
HTML：
<div class="mainTeaser">
<img src="teaser.jpg" />
<span class="teaserWrap">
<span class="headline">TEXT</span>
<span class="subline"&g
浏览 2提问于2015-07-22得票数 1
回答已采纳
4回答
在内联块列中以段落为中心
、、、、
我有一个像这样的砖石格栅：
<div class="masonry">
<div class="brick">
<p>Img Title</p>
<img src="img.jpg">
</div>
<div class="brick">
....
</div>
</div>
使用此css：
.masonry {
浏览 1提问于2019-10-14得票数 1
回答已采纳
1回答
我需要在固定宽度和高度的块级元素内居中对齐图像(可变宽度和高度)。css标记如下所示：
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width=
浏览 4提问于2009-04-06得票数 2
回答已采纳
1回答
我试图使用最交叉的浏览器和直进的方式，垂直对齐和水平对齐我的表单在页面上。我已经读到这应该做到这一点，但当我把它放在我的CSS，它仍然坐在顶部。
vertical-align: middle;
我相信我已经使它的水平对齐正确，但不能在我的生命使它垂直对齐。
有一种方法是可以使用的，但显然这不是很跨浏览器。
display: table-cell
这是我的距离，所以far.an任何人请帮助我理解，为什么不呢？
浏览 6提问于2013-06-09得票数 0
5回答
我需要构建一个如下所示的布局
+-------+-----------------------------+-------+
| | | |
| | | |
| A | B | C |
| | | |
| | |
浏览 0提问于2013-03-20得票数 0
回答已采纳
2回答
我知道这个帖子已经写了很多次了，但出于一些奇怪的原因，vertical-align:middle;似乎不起作用。
我试图让<label></lable>元素中的所有内容垂直对齐。
文本和<strong></strong>必须保持左边。
<strong></strong>文本字体大小必须小于<lable></lable>文本，并与<lable></lable>文本垂直对齐。
图像必须是float:right;，并与<lable></lable>文本垂直对
浏览 4提问于2014-05-22得票数 1
2回答
我有一个图像，我需要中心的垂直和水平！我已经尝试了在线教程，尝试使用‘垂直-对齐’，但我似乎无法让它发挥作用。这是我的密码。
CSS
img.logo{
display: block;
margin-left: auto;
margin-right: auto;
max-width:300px;
}
.s1{
background-color:#FFF;
height:100vh;
}
HTML
<section class="s1" data-scroll-index='0'>
浏览 3提问于2014-04-21得票数 0
回答已采纳
我正在尝试在HTML中排版一个显示的等式，以及一个等式号。该方程以图像形式呈现，方程号以文本形式给出：
<p>some text
<span style="display: block">
<span>(1.7)</span>
<img alt="[some equation]" src="img.png">
</span>
some more text.</p>
其结果看起来类似于LaTeX如何排版显示的等式：
方程数和公式应该是垂直中心的，即(1.
浏览 1提问于2016-09-22得票数 0
回答已采纳
3回答
如何将文本放置在图标上？
、、、、
我已经找到了许多vlog对齐他们垂直或水平，但我正在寻找的是如下所示的图像。我想拿一个放大镜，并根据情况在其中添加不同的字母。
浏览 7提问于2022-09-26得票数 0
4回答
我有一个有3列内容的页脚。目前，css正在使用float:left。我已经尝试了以下的，但我只是无法使它对齐垂直和水平。
block-inlinemargin: 0显示块
HTML:
<div id="footer">
<div class="column">
<h3>Information</h3>
<ul>
<li><a href="">Delivery Information</a></li>
浏览 5提问于2011-08-30得票数 1
回答已采纳
我有一个div，在这个div中，我试图对齐一个文本和一个图像，无论是垂直的还是水平的。
所以对于水平的，我已经给出了text-align: center;作为垂直的am，因为图像大小和实际的图像有点不同，这是一个png格式，所以你可以看到透明的。在图像中有额外的空间，所以它可能会显示在顶部。
如何使文本和图像的水平以及中心对齐。任何想法都会有帮助
以下是问题后的css编辑
.click
{
width:50%;
height:50%;
background-color:red;
text-align:center;
position:absolute;
浏览 2提问于2013-12-12得票数 0
我正在寻找一种简单的方法来在DIV中中右对齐img，即垂直-中间和水平-右对齐，如下所示：
我试着在IMG样式中使用竖直对齐:中间和浮动:右，但似乎不能一起工作。
<div style='height: 300px; width: 300px'>
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/>
</div>
浏览 0提问于2012-01-25得票数 4
回答已采纳
我想将jQuery UI抖动效应与CSS风格的position: absolute结合使用，但这只适用于火狐。在所有其他浏览器中，这种效果会中断CSS样式。
我希望div是水平和垂直对齐的，并且抖动效果不会禁用position: absolute。但我不能让它起作用。
这是我的
<div class="toggle"></div>
.toggle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
wid
浏览 7提问于2013-10-28得票数 1
回答已采纳
我想把它们对齐，这样登录和注册就会垂直对齐大括号的中心，并且所有东西(除了输入框/标签)在屏幕上是水平的。
这是我的HTML：
<body>
<img src="{{ STATIC_URL}}logo.png" class='center'></br>
<div style:"display:inline;">
<a href='#' title='click to login' onClick='login()'>lo
浏览 4提问于2011-12-08得票数 0
回答已采纳
有没有办法在css中设置垂直对齐？我在<li>元素中有一个文本，但是当我将文本对齐到中心时，它只设置了文本的水平对齐方式。但是当我使用padding-top函数时，它会改变<li>元素的大小。如何在不改变<li>元素大小的情况下设置垂直对齐方式呢？
浏览 0提问于2012-12-18得票数 2
回答已采纳
2回答
垂直对齐不起作用
、、
我知道这是相当烦人的，似乎垂直对齐CSS是常见的陷阱，但我真的需要你的帮助。
我希望文本总是在“中间”的垂直位置留在图像(图像test.gif有不同的尺寸)。
我有这样的html元素结构(不幸的是，由于系统限制，我无法更改它)
<div class="wrapper">
<div class="logo">
<img alt="some text" src="http://localhost/test.gif">
</div>
<di
浏览 0提问于2013-10-08得票数 0
回答已采纳
2回答
我正在尝试将文本(可能跨越或不跨越几行)集中对齐到一个有<div>应用于它的position: absolute中。
请考虑以下标记：
<div class="item">
<img src="test.jpg" />
<div class="overlay">
<a href="#">Some long content</a>
</div>
</div>
应用的CSS如下(请注意，这是较少的版本
浏览 1提问于2014-02-14得票数 2
回答已采纳
3回答
我在一个div内水平和垂直地对一个元素，但是jQuery的CSS代码似乎只产生了style="margin: 0px"的任何想法吗？
()
jQuery:
image.css({
'margin-top': '-'+(style['img-width']/2)+'px',
'margin-left': '-'+(style['img-height']/2)+'px',
});
或者，我尝
浏览 6提问于2014-11-17得票数 0
回答已采纳
1回答
我试图在wordpress的div中垂直对齐图像，div被设置为一种背景边框，我已经这样做了，我已经让div中心内的图像水平对齐，但我不能垂直对齐，有人能帮我吗？
这是我目前的类，.image是div，img是帖子中的图片。
.entry img{max-width: 475px; max-height: 240px; padding: 50px;}
.entry .image{background-image:url(images/image-back.gif); width: 590; height:339px; text-align: center; margin-top: 20px;
浏览 0提问于2011-10-30得票数 0
3回答
我有一个表格单元格元素，我试图对齐水平和垂直，但我只是设法使1工作，这是垂直对齐。
图像没有固定的大小，所以它必须是流体和工作的最大高度，宽度.
CSS
.prod-img {
display: block;
margin: 20px;
border:1px solid black;
}
.prod-img a {
max-width: 170px;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.prod-img img {
width: auto;
max-width: 10
浏览 6提问于2015-12-02得票数 0
回答已采纳
什么是最简单，最快的方式垂直对齐大小不同的水平对齐图像？谷歌上的一切都不适合我或者我做得不好.我试过在.media和.media img中使用“垂直对齐”属性。
这是我的小提琴：
<div id="main">
<div id="avatar">
<img src="http://i.imgur.com/GgxBXAA.png" />
</div>
<div class="media">
<img src=&
浏览 1提问于2014-01-10得票数 1
回答已采纳
2回答
使用下面的代码我的文字是垂直对齐底部。需要帮助垂直对齐中间的文字与图标在链接。
HTML
<a href="/The-Experience.aspx" class="icon">
<span class="white bold">Learn More</span>
<div class="arrow-white-right"></div>
</a>
CSS
a.icon { line-height:46px; vertical-align:m
浏览 2提问于2014-07-02得票数 1
回答已采纳
6回答
我正在iOS设备上加载图像。我希望我的图像是水平居中，以及垂直中心与所有屏幕和方向。我试过用表格和td，它是对齐水平中心，但不是垂直对中。这就是我尝试过的html：
<table width=100% height=100%>
<tr>
<td style="text-align: center; vertical-align: middle;">
<img src="" />
</td>
</tr>
</tab
浏览 11提问于2014-01-02得票数 26
回答已采纳
3回答
html：
<td>
<img>
text here
</td>
css：
td img{
display: block;
float: left;
}
我希望图片在单元格内浮动到左边，文本垂直对齐到中间。如果没有图片，文本会自动垂直对齐到中间，但有了图片，我似乎无法更改文本的垂直对齐方式。
有什么想法吗？
浏览 4提问于2010-12-07得票数 1
回答已采纳
4回答
如何使div在整个页面的左侧浮动，并且始终位于垂直的中间左侧？
我的html代码很简单：
<body>
<div class="num_book">
<img src="imgs\PhoneDir.png" alt="phone dir" height="142.2" width="45.6">
</div>
</body>
到目前为止，我的css：
.num_book {
float: left;
}
我试过在我的css:位置
浏览 6提问于2017-09-02得票数 0
回答已采纳
2回答
我正在建立一个导航系统。它的结构是一些无序列表漂浮在左边。但是，第一行项目包含一个图像元素，我似乎无法在UL中垂直对齐它。这很难解释，所以我在这里创建了一个js小提琴：
任何关于如何将img放置在包含UL的中间的指针，无论是垂直还是水平，而不是求助于玩填充，都将非常感谢。
浏览 2提问于2012-01-29得票数 1
3回答
垂直对齐图像
、、、
我有一个大的标志在主页上，应该是对齐的中心。我设法使它水平地居中，但不是垂直的。我能想到的唯一解决方案是将最高利润率设置为20%，但对于响应性设计来说，这似乎不是一个好的解决方案。对此有什么正确的解决办法呢？
下面是HTML：
<section id="home">
<div class="container">
<img id="logo2" class="img-responsive" src="img/logo2.png" >
</div> <!--en
浏览 5提问于2015-02-22得票数 0
回答已采纳
我有一个包含标题文本和图像的div。
下面的代码显示的标题正好在图像的上方。
HTML代码：
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
我想对齐标题，以便它将出现在中心(垂直和水平)
浏览 3提问于2014-03-20得票数 0
回答已采纳
4回答
海军横+垂直中心
、、、
我怎样才能使这个肚脐水平和垂直的中心？
下面是我导航栏的截图：
HTML代码
<div class="content">
<div class="nav">
<ul>
<li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Startseite</a></li>
<li><a href
浏览 13提问于2014-03-06得票数 0
回答已采纳
4回答
我正在开发一个Ionic应用程序，我在圆形区域显示一些，但我需要将这个数字放入第二个区域的心脏图标中。我需要他们垂直和水平地对齐，这个数字看起来就像心脏的内部。我一直在尝试一些事情，但我不能一次完成所有的事情。我怎么能这么做？谢谢。
注意到：文本是动态的，它是一个百分比，可以是0%到100%
这是那个地区的代码
<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/>
<div class="post-info"
浏览 9提问于2016-05-04得票数 6
6回答
我有一个div，我想在不改变垂直位置的情况下，在浏览器窗口内水平地居中。这是我的div：
<div id="divErrorMessage" class="ErrorClientSide">
<div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
<div id="divErrorMessageText" style="margin-left:
浏览 2提问于2015-03-27得票数 1
回答已采纳
2回答
我有一个徽标(775 X 225)，我想居中(垂直和水平)在一个网页，然后有一个链接“回车”，放置在它下面
<html>
<head>
<Title> My website </Title>
<style type="text/css">
//centerlogo CSS class here ?
</style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span><
浏览 0提问于2013-04-27得票数 0
回答已采纳
我正在努力实现以下结果：
在水平方向上，div 2的中间与div 1的右侧对齐
_______________________________________
|div 1 _________|_______
|*|*
|*||*|
| |_________|_______|
|______________________________________|
divs的宽度将根据其他约
浏览 0提问于2016-06-30得票数 0
4回答
我目前正在使用CSS裁剪图像，如下所示：
<div class="crop">
<img src="image.png" alt="">
</div>
.crop {
width: 150px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 150px;
height: auto;
margin: 0 0 0 0;
}
这样，它就可以在容器内水平对齐图像。然而，我不知道如何在中心垂直对齐图像(所以它就在中间)。有什么帮助吗？
浏览 1提问于2014-07-10得票数 4
我需要将一个html页面的背景分成2部分(水平方向)。顶部和底部将有一个不同的背景图像/纹理，这将是重复的，换句话说，可以根据窗口的大小扩展。在这个“拆分背景”的顶部，我想要显示一些内容，比如文本或图像。
这段代码生成了我想要的“分割背景”，但我不能/不知道如何将内容放在上面……
<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; }
.top { width: 100%; height: 50%; backgr
浏览 2提问于2011-10-17得票数 2
回答已采纳
2回答
我使用的是一个固定在屏幕顶部的<div>。这个div包含一个菜单。页面的其余部分可以垂直和水平滚动。
如果用户有一个小的显示，他不能到达菜单中的所有项目，尽管他可以水平滚动。如果我使用overflow-x，<div>将得到它自己的滚动条，这看起来不太好。我要那个页面和菜单共享主水平滚动条。
注意:在我的例子中，页面的宽度是，始终是与菜单大小相同的。
<div id="menu">
<img src="http://www.widescreen-wallpapers.de/wallpapers/502-sonnenu
浏览 1提问于2015-06-23得票数 0
我得到了这个HTML：
<div class="A">
<div class="B1">
<div class="C1"></div>
</div>
<div class="B2"></div>
</div>
.A是一个带有填充的容器，B1包含一个长列表和卷轴。.B2应该在列表中对齐(垂直和水平居中，就像加载图像一样)。
我怎样才能做到这一点？水平对齐不适合我：
浏览 4提问于2016-03-25得票数 0
回答已采纳
我对CSS相当陌生，虽然我已经找到了在DIV中对IMG进行中心化的例子，因为我在外部DIV上有一个float: right;，但它并不像我想的那样工作。这基本上使DIVs出现在正确的位置，但IMG不是中心。
下面是我的场景示例的一个CSSDesk链接：
我正在尝试使绿色共享图标在外部红色框(DIVs)中以垂直和水平的方式显示居中。
我确信我的CSS有很多改进，但请回答我的问题(尽管可以随意评论这篇文章和CSS贴士)。
希望这有意义..。
浏览 1提问于2014-02-27得票数 0
回答已采纳
3回答
我想在屏幕中央打开一个div (水平和垂直)。
var documnetWidth = $(document).width(),
documentHeight = $(document).height(),
widgetFormHeight = widgetForm.height(),
widgetFormWidth = widgetForm.width();
widgetForm.css({
top: documentHeight / 2 - widgetFormHeight / 2,
left: documnetWidth / 2 - widgetFormWidth
浏览 0提问于2012-09-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
