3回答
在div中裁剪居中图像
、、、、
我有一个包含图像(img)元素的div，该元素在其中扩展为100%的宽度。我想指定div的最大高度，并隐藏超过此高度的图像部分。但我也想让这张图片在div中垂直居中，只显示它的中心部分。
例如，如果浏览器宽度为1200px，图像纵横比为4:3，则图像应显示(1200x900)px。但是如果我们只想裁剪高度到300px并垂直居中，图像应该定位在div内部的-300px (并且div应该隐藏图像高度的0-300和600-900 )。类似的想法也可以用在其他的widhts上。
我很确定用javascript可以很容易地做到这一点，但我想知道是否有一种方法可以用CSS来做到这一点。提前感谢！
浏览 2提问于2013-12-07得票数 2
我正在寻找一种干净的方式来显示底部对齐的垂直颜色条。当前的实现使用font-size调整高度，这很粗糙&结果是垂直居中的条形图。
HTML：
<div id="barChart">
{% for bar in bars %}
<div class="bar" style="border-left-color:{{color}};font-size:{{barHeight}}">.</div>
{% endfor %}
</div>
CSS：
.bar{
color:trans
浏览 11提问于2017-08-08得票数 2
回答已采纳
我已经尝试了在stackoverflow上发布的各种其他解决方案，这些解决方案对其他人有效，但不幸的是，我无法让图像正确地垂直居中。我希望有人能弄清楚我们需要什么。
这是顶部导航栏的右上角，我设置了红色边框以便于查看。我希望右边的照片在集装箱内垂直居中，因为你可以从照片下面的间隙看到它不是垂直居中的。
请注意:我可以在图像上使用position:relative；bottom:-5px；让它工作，但我想知道是否有其他/更好的方法。
HTML：
<div id="nav-userOptions" class="col-xs-4">
&l
浏览 0提问于2015-04-09得票数 0
2回答
我有2个图片在我的主页上，这是垂直居中。
#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
但是，我希望它们在水平和垂直方向上都居中。
当我不使用float: none !important;时，图像水平居中，而不是垂直居中。当我使用f
浏览 3提问于2016-03-11得票数 0
我有以下HTML
<div class="parent">
<div class="left-colum">Some paragraphs of text</div>
<div class="right-column"><img src="image.jpg"></div>
</div>
右列有图像的宽度，但是由于它持有不同大小的图像，所以它的宽度是未知的。我想要左列采取任何需要，但最大宽度为150 max。我也希望图片在右边的列垂
浏览 3提问于2015-10-12得票数 0
回答已采纳
我有一个问题，我不能垂直对齐我所有的文本，我试图搜索，但我没有找到任何解决我的问题的方法。
这个链接显示了我运行代码时的样子，我正在尝试使标题更接近段落。
我在同一个<div class="row">中创建(2)个col-sm-6。右栏我想让图片在栏内垂直居中，在左栏我想让段落和标题垂直居中。使用CSS的原因是，我试图让它适合任何浏览器窗口的大小。
我在正确的轨道上吗？
这是我的css
.center {
height: 400px;
position: relative;
border: 0px solid green;
}
.center
浏览 0提问于2019-10-31得票数 0
我有几个div的图片在我的文章中，我使用最大宽度/高度和overflow:hidden裁剪图像，这很好用，但它是从顶部裁剪图像，我希望它们在div中垂直居中。
.image_div {
max-height: 150px;
max-width:99%;
overflow: hidden;
margin:0px;
text-align:center;
}
.image_div img {
}
我使用max-width/height来避免出现大块空白，以防图像很小。我正在寻找的css是可能的吗？
还应该提到一个CSS3解决方案将是伟大的，因为这是一
浏览 0提问于2012-10-03得票数 1
3回答
如何将图像动态居中？
、、、、
使用css和javascript/jquery，我如何将我在页面上垂直显示的图像居中显示？让我画一张图。这就是我所拥有的。
-------
| |
| |
-------
----------
| |
| |
----------
------
| |
| |
------
这就是我想要的
-------
| |
| |
-------
-----------
| |
| |
-----------
-----
| |
| |
-----
浏览 0提问于2012-05-03得票数 3
回答已采纳
2回答
我正在尝试编辑tumblr主题，使我的帖子在图片中居中(图片在div中)我尝试在CSS中为帖子和div设置相同的页边距，但我似乎无法使div中的图片在页面上正确居中。我想要的帖子是完美的水平居中的图像，即使当浏览器窗口调整大小。有人知道我是怎么做到的吗？有没有比把图像放在div中更简单的方法呢？下面是我的代码的链接
浏览 2提问于2013-08-04得票数 0
我的JQuery UI垂直幻灯片在火狐中不起作用，因为在.label上使用了display:table-cell来垂直居中文本。
请参阅：
我如何在Firefox中修复，同时保持垂直居中？
浏览 2提问于2012-10-02得票数 1
回答已采纳
2回答
我正在尝试遵循这个教程，让图像在div的中心对齐：
这是我正在处理的页面：
你看到右边的“加入群组”按钮没有垂直居中了吗？
我正在做这个css：
width: 280px;
float: right;
border: 1px solid;
margin-bottom: 5px;
vertical-align: middle;
display: block;
display: table-cell;
我想过关于垂直对齐的部分:居中；可以做到这一点，但事实并非如此。有没有办法让按钮垂直居中？
谢谢!
浏览 0提问于2011-05-30得票数 0
回答已采纳
6回答
我有这个简单的HTML代码，但是让我感到沮丧，因为它不能垂直地居中：
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
这是我的CSS：
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
.inner div实际
浏览 6提问于2015-02-05得票数 1
回答已采纳
在jsFiddle上查看我的代码：
HTML代码：
<div>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>
CSS代码：
div {
height: 118px;
line-height: 118px;
background: red;
}
img {
vertic
浏览 2提问于2012-02-16得票数 2
回答已采纳
3回答
我在div中有一个div和一个图像。图像大小会有所不同。
我想让它在水平和垂直方向居中。Css垂直对齐似乎不起作用。
有什么窍门吗？我可以使用php、css或Jquery。
浏览 2提问于2009-10-20得票数 3
回答已采纳
这是我的
<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
回答已采纳
我创建了两个矩形div(需要保持60 of宽和150 of高)，其中包含文本。文本是垂直排列在矩形中的，所以我使用transform: rotate(-90deg)垂直对齐文本。
我想让文字垂直和居中。在垂直旋转文本之前，我使用display: table和vertical-align: middle方法对文本进行居中。当文本是水平的时，这是完美的。但是，在旋转内容后，文本不会保持居中。CSS仍然将文本居中，就好像它是水平的。
我尝试使用绝对/相对位置从顶部和左侧偏移文本，但是当我删除display: table和vertical-align: center属性时，文本就消失了。
对于如何在保
浏览 10提问于2016-03-30得票数 1
回答已采纳
6回答
我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。
有人能建议我怎么才能得
浏览 0提问于2012-03-09得票数 38
回答已采纳
1回答
你好，我有3张图片在一个div里面。我已经设法将div居中，但其中的图像仍然位于左侧。我想居中和均匀地间隔这些图像大约5px。当屏幕的宽度很窄时，比如手机大小，我希望这些图像最终垂直堆叠，而不是调整为变小，而是保持水平。
到目前为止，我有以下内容(html)：
<section id="events" class="main style3 primary">
<div><a href="http://www.residentadvisor.net/event.aspx?6826
浏览 0提问于2015-03-20得票数 0
CSS的新手，请耐心听我说。我试图在HTML/CSS中垂直堆叠不同的项目，但无法让它们以自定义间距垂直堆叠。这是我到目前为止所拥有的。
<p id="loginView">
<input type="text" id="usernameField">
<div></div>
<input type="password" id="passwordField">
<button id=
浏览 0提问于2019-06-10得票数 0
3回答
使用CSS很容易在容器中使用text-align:center;对文本进行水平居中，但是如果该文本的任何一个单词大于容器的宽度，浏览器就会自动“剪辑”到容器的左侧边界(例如，超大的单词与太小容器的左侧对齐)，并且没有CSS word-break:hyphenate;属性设置(或类似的)超大型单词在容器的右侧突出。
有没有办法让这张图片在这里浮动，以节省垂直空间？哦，好吧。不管怎样..。
不使用，使用子容器元素来保存文本，是否有一种方法可以将超大的单词放在中间，使其同时挂在容器的左右两侧？
同样，我不想在容器中使用文本容器。我可以在5秒内使用带有固定<div>text to b
浏览 2提问于2012-07-11得票数 10
回答已采纳
3回答
我知道这是一个常见的问题，我已经问过一个类似的问题。但是这次我找不到解决的办法。我正在尝试垂直居中的文本，可以有不同的高度在DIV中，可以有不同的高度。我试图只用CSS来解决这个问题，而不去接触HTML。
示例：
<div id="test">
<div id="sumup">
<h1 class="titre">Title</h1>
<div id="date">hello guys</div>
</
浏览 6提问于2013-11-05得票数 10
回答已采纳
2回答
我想把这个文本垂直地和水平地放在一个容器内，它在一行和一个列中，设置为12，但我只能让它水平地而不是垂直地居中。我尝试了Flex，但是它将页面中的所有对象移动到中间，我只想让这个对象居中。
HTML：
<div class="container-fluid home">
<div class="row">
<div class="col-md-12" id="text">
<p>Hello World!</p>
</
浏览 6提问于2016-12-13得票数 1
回答已采纳
如何让div在没有脚本的情况下水平和垂直居中？只在CSS和HTML5上？
<div id="center"></div>
#center{width:500px; height:300px;}
浏览 1提问于2011-08-24得票数 1
回答已采纳
5回答
我试图在一些链接上创建一个覆盖图，当你将鼠标悬停在它上面时，会显示一个放大镜作为覆盖图。
为了简单起见，我在这里创建了一个小提琴：
我可以让放大镜图标水平居中，但不能垂直居中，它总是在元素的顶部。我尝试过设置vertical-align:middle和top:50%，但它们都不起作用。
我有一个限制，那就是我根本不能改变超文本标记语言，我只能改变:before伪元素的css。
有没有办法可以将:before的内容居中
浏览 0提问于2016-04-26得票数 0
3回答
左边的竖栏是my site菜单系统。该列是一个高度为100%的div，不同的细节由div覆盖。
按钮是DIV的，以空白按钮为背景，上面有链接。我有两个不同大小的按钮，一个大的60px高，一个小的30px。使用CSS是否可以让链接垂直居中，而不考虑按钮DIV的高度？
我在这里看过并使用了一些CSS站点& Android应用程序。这里的站点表明我不能，但我不能理解为什么CSS小组不创建垂直居中功能，因为它似乎是如此需要。
是我只是错过了什么，还是我真的想得到CSS中没有的东西？
浏览 4提问于2013-03-08得票数 0
回答已采纳
4回答
我有下面这段HTML页面：
<div id="main">
<div id="description">
Some text
</div>
</div>
使用以下CSS：
#main {
height:600px;
vertical-align:middle;
}
#description {
display:block;
height:50%;
width: 50%;
margin: auto;
font-size:18px
浏览 2提问于2011-10-27得票数 0
回答已采纳
2回答
想用CSS垂直居中div。不想要表或Javascript，但只有纯CSS。找到了一些解决方案，但都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器（包括Internet Explorer 6）中垂直居中div？
浏览 574提问于2017-12-06
2回答
如何让我的图片在打开页面时垂直加载？我知道如何使用HTML/CSS使div元素淡入页面，但我想知道如何才能像在中那样垂直地替换标题图像
谢谢!如果这个问题太模糊了，很抱歉。如果有人能帮我找到一个我可以使用的codepen或jsfiddle链接，那也会有很大帮助的！
浏览 0提问于2017-03-02得票数 2
回答已采纳
2回答
带纵横比的中心分割
、、、
我需要在html视图中居中放置一个Div。它应该在垂直和水平方向上都居中。但Div应该保持其宽高比(4/3)，并且最小边距为10px。
我做了一个Javascript：
function resizeWindow() {
var wHeight = $(document).height() - 20;
var wWidth = $(document).width() - 20;
var gameStage = $("#gameStage");
if ((wWidth / 4) * 3 <= wHeight) {
gameStage.css("width
浏览 0提问于2015-08-26得票数 3
1回答
我使用React，并使用display: table和display: table-cell将元素水平和垂直居中，并适当居中css。
在它里面我有一些内容，当我用javascript将内容添加到元素中时，整个元素正确地重新居中，但元素从它们的初始位置跳到它们的下一个位置。
我想在适当的地方让它动起来，可以吗？
从这个开始：
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
要这样做：
<div table>
浏览 1提问于2017-02-13得票数 0
3回答
我有一个div和一些文本。为了让我的内容水平和垂直居中，我使用了css。它在火狐中运行良好，但在IE6中测试以下代码时，内容不会垂直居中。
因此，请指导我，我需要在我的css添加或更改。
我的html代码是
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
浏览 1提问于2010-12-07得票数 0
回答已采纳
46回答
我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器(包括Internet Explorer6)中将div垂直居中？
浏览 37提问于2008-12-28得票数 1523
回答已采纳
我已经阅读了大约20个关于HTML/CSS中垂直对齐/居中的问题和文章，但我仍然无法让我的特定案例发挥预期的作用。
请看一下
<div class="outer">
<div>Left1</div>
<div>Left2</div>
</div>
<div class="inner">
<a href="#">Before</a>
<span>Middle</span>
<a href=&#
浏览 2提问于2013-03-30得票数 1
回答已采纳
1回答
我有一个没有固定高度的div元素，我想让它在父元素中垂直居中，而不考虑它的高度。我在现代浏览器中使用了display: table-cell技术，但是这种技术在IE7及更低版本中似乎不起作用。有什么方法可以在IE7及以下版本中使用纯CSS实现这种垂直居中的效果吗？提前谢谢。
浏览 2提问于2012-08-30得票数 1
我想让div始终水平和垂直居中。
我可以减小/增加窗口的宽度，div将始终保持在窗口的中心
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这是我目前所拥有的。但是我也想让div保持垂直居中，所以如果我减少/增加窗口的高度，div会以停留在窗口中间来响应。
关于这个例子，我想让黑盒在调整窗口大小时保持垂直居中，就像它总是水平居中一样。
浏览 1提问于2013-07-08得票数 17
回答已采纳
6回答
我的代码如下：
<div id="bigDiv">
<div id="smallDiv">DD</div>
</div>
我的CSS如下：
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
vertical-align: middle;
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 0 auto;
浏览 0提问于2013-01-11得票数 6
回答已采纳
我有一个网上相册。缩略图页面是一个150px x 150px div的网格，缩略图图像设置在其中。
由于缩略图是矩形的，理想的做法是在div中自动居中。
读到这里，我想出了如何使它们水平居中。我还读到，在CSS3起飞之前，自动垂直居中是不可能的。这是真的吗？
我已经得到了水平图像自动居中，这是：
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
但是，垂直居中不起作用：
.landscape_t {
width: 150px;
height
浏览 1提问于2012-06-15得票数 0
回答已采纳
1回答
我有一个三栏的布局，其中一个是这样的-
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper&#
浏览 4提问于2015-09-26得票数 0
1回答
我有div，我想让它的内容垂直居中对齐。
我将css与display: table-cell一起应用，然后设置vertical-align: middle，但它不起作用：
这是链接：
div的内容一直在变化。
在这里，我希望具有类"EntryFormControlDiv“和"EntryFormLabelDiv”内容的div应该在类"EntryFormRow“的div中垂直对齐。
任何帮助都是非常感谢的。
浏览 4提问于2011-11-03得票数 0
回答已采纳
2回答
假设我有一行全部大写的文本(例如text-transform: uppercase)。我想让这个文本在div中垂直居中。我不需要担心多行文本。
有几种方法可以在CSS中垂直居中(例如，check out)。不幸的是，所有这些方法都考虑到了，并且我的文本没有任何下行体，所以它不能完美地居中。基本上，我希望将文本的一部分从基线居中到大写高度。
有没有办法使一行大写文本垂直居中？现在我正在使用position: relative并手动调整它，直到它居中(例如使用top: 2px)，但这显然不是一个健壮的解决方案(它非常依赖于浏览器呈现文本的方式，可用的字体等)。谢谢!
浏览 4提问于2013-04-29得票数 6
回答已采纳
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
回答已采纳
我正在尝试居中具有背景视频容器的图像。我想让它在垂直和水平方向上精确居中。目前，我只能将图像水平居中，但在垂直居中时遇到困难。当我将图像居中时，它不会响应。有什么想法吗？
这是它在我的标题区域中的样子：
HTML代码：
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop"
浏览 15提问于2017-02-13得票数 0
2回答
我正在尝试设置一个HTML文档，其中有一个固定位置的标题栏，其中包含应用程序的所有菜单选项；该栏应该固定在页面的顶部。条形图的实际内容部分的最小宽度应为1000 is，并且应该包含在一个包装器中，如果页面的is>1000 is，则该包装器将填充所有剩余的空间，并将内容部分居中。
我已经能够这样做了，使用display: fixed，当滚动垂直的时候，我可以让条形条坚持到页面的顶部，但是如果页面是<1000 it，水平滚动不会显示该条的其余部分，它会坚持到其固定的0,0位置。
更改为display: relative，当水平滚动时，条形图的行为与预期一样--我可以看到它的右半部分--
浏览 9提问于2015-08-27得票数 0
回答已采纳
我在我正在开发的页面的顶部有一个导航栏。我想要一个特定的<div>居中(这是另一个<div>)。有没有一种简单的方法可以用CSS做到这一点？我尝试使用像素，但在调整窗口大小时不起作用。
我试着让它水平居中，而不是垂直居中。
更新：
我想要居中的<div>是一个<div>中的三个<div>之一。这是一个搜索栏。
下面是我想要的图像和它是什么，边距设置为自动。(抱歉，图像不能准确显示我想要放置搜索栏的位置。我想让它再往左一点(在导航栏的中心)。
浏览 3提问于2010-11-21得票数 0
1回答
我试图对齐我的图片在网页的画廊垂直，所以所有的底部匹配在一行？我用的是万能弹出。我该怎么做？目前，它们垂直地以如下方式居中：
浏览 3提问于2015-12-23得票数 0
回答已采纳
我正在使用这个脚本水平和垂直居中我的div。
当页面加载时，div会垂直居中，而不是水平居中，直到我调整浏览器的大小。
我做错了什么？
$(document).ready(function (){
$(window).resize(function (){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
浏览 5提问于2012-12-17得票数 36
回答已采纳
4回答
我正试图在<a>标签中的div中垂直对图像进行居中，但是我无法让CSS在我的生活中垂直地对图像进行居中。
div {
height: 7rem;
width: 90%;
text-align: center;
margin: 1.25rem auto;
padding: 0 5.5rem 0 5.5rem;
font-size: .8rem;
border-style: solid;
border-width: .08rem;
}
div * {
position: relative;
top: 50%;
transform: tra
浏览 0提问于2016-10-28得票数 1
回答已采纳
4回答
我想在浏览器中显示一幅图像，这样：
如果图像小于浏览器视图，则图像以水平和垂直方向居中。
如果图像大于视口，则缩小图像以填充尽可能多的视口，而不调整图像的纵横比。同样，图像是以水平和垂直方向居中。
我不想使用JavaScript；最好的/最语义的HTML和CSS是什么？
更新我被要求澄清语义:图像是内容，是HTML中的唯一内容。
解决方案
@GionaF的想法让我找到了一个快乐(非常简单)的解决方案：
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href=
浏览 6提问于2012-09-30得票数 13
回答已采纳
我尝试将一个div垂直对齐到相邻的div，它的高度是动态的。
我遇到的大多数方法都需要知道父div的高度。但是如果你看到我的例子，它是“右”的div驱动整个部分的高度。
我正在尝试让文本从div "left“垂直居中显示到div的右侧。"parent“div也没有固定的高度。
我该如何做到这一点，最好是使用CSS？
谢谢。
我的例子：
浏览 0提问于2012-03-28得票数 2
回答已采纳
4回答
css属性vertical-align: middle在本例中不起作用。
HTML：
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS：
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
浏览 2提问于2011-11-01得票数 48
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
