如何在一个div中垂直和水平地居中文本，同时也在一个大小可以变化的图像周围流动
是否可以使用CSS在div中水平和垂直地居中文本，该div还具有可变大小的图像（应该始终是右对齐的）？
例如，这是为体育联赛表显示的“标题”设置样式--标题基本上由联赛名称（文本）和可选的联赛徽标（图像）组成。图像的宽度和高度可以是可变的，这取决于所使用的徽标图像。
null
.lbo_header_logo {
border: 1px solid #31639C;
float: right;
margin-left: 20px;
vertical-align: middle;
}
.lbo_header_title {
padding: 5px;
background-color: #ddeeff;
border: 1px solid #31639C;
min-width: 550px;
vertical-align: middle;
width: 50%;
}
.lbo_header_name {
color: black;
font-size: 16px;
font-weight: bold;
overflow: hidden;
text-align: center;
vertical-align: middle;
}<html>
<head>
<title>Test!!</title>
</head>
<body>
<div class="lbo_header_title">
<div class="lbo_header_name">League 1<IMG class="lbo_header_logo" src="images/logo1.gif" width="70" height="30"></div>
</div>
<div class="lbo_header_title">
<div class="lbo_header_name">League 2<IMG class="lbo_header_logo" src="images/logo2.gif" width="30" height="70"></div>
</div>
</body>
</html>null
我想我已经设法使文本水平居中（如示例所示），但却在垂直方向上挣扎！
我试过所有的方法，比如线高技巧，但这对我来说都不起作用，因为图像的高度是未知的。
我想我会寻找某种解决方案，使用一个最大值的图像高度，因为最终我想要限制徽标到一个合理的高度/宽度无论如何（即，避免他们上传一个愚蠢的长/宽图像，搞砸了显示！）。
共有1个答案
通过使用FlexBox，您可以避免对hacky变通方法的需要。它可以像你想要做的那样，对一些简单的属性进行居中定位。
将容器设置为flex，并使用align-items:center将内容垂直居中。然后对文本进行居中对齐。
文本被包装在div中，该div设置为填充所有可用空间(flex:1 1 auto)，而徽标不允许增长或收缩(flex:none)。
null
css prettyprint-override">.lbo_header_title {
align-items: center;
display: flex;
text-align: center;
/** various existing styles */
padding: 5px;
background-color: #ddeeff;
border: 1px solid #31639C;
min-width: 550px;
width: 50%;
}
.lbo_header_name {
flex: 1 1 auto;
}
.lbo_header_logo {
flex: none;
margin-left: 20px;
}
<div class="lbo_header_title">
<div class="lbo_header_name">League 1</div>
<img class="lbo_header_logo" src="https://placehold.it/70x30" width="70" height="30" />
</div>
<div class="lbo_header_title">
<div class="lbo_header_name">League 2</div>
<img class="lbo_header_logo" src="https://placehold.it/30x70" width="30" height="70" />
</div>
-
问题内容： 我有一个div 200 x 200像素。我想在div的中间放置一个50 x 50像素的图像。 怎么做到呢？ 我可以通过使用div 使它水平居中。但是垂直对齐是个问题。 问题答案： 就个人而言，我将其作为div中的背景图像放置，其CSS为： （假设您已经在指定div 并添加div 应该不是问题） 让浏览器承受压力。
-
问题内容： 我弹出一个包含ASP.NET表单的弹出窗口，单击链接“请求信息”，然后出现该表单。 但是，具有链接“请求信息”以触发弹出窗口的页面包含很多内容，因此需要滚动才能看到该链接。 如果用户滚动阅读内容，则需要始终居中，否则，如果他们不滚动，弹出窗口仍将居中显示在屏幕上。 在绝对定位，整个页面宽度与边距设置为。 问题答案： 如果div具有固定的宽度和高度，请使用：（如果width = 120p
-
问题内容： 有没有办法在 垂直和水平方向上输入一个DIV， 但这很重要， 当窗口小于内容时，内容将不会被剪切 。div必须具有背景色，宽度和高度。 我总是将div的中心定位为绝对位置和负边距，如提供的示例所示。但是它有一个问题，那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题？ CSS： HTML： 我的问题不是重复的“如何在水平和垂直方向上居中放置元素？”1-
-
问题内容： 免责声明： 我不相信这是重复的，因为我使用相对尺寸来生成全屏网格布局而不使用。 问题： 在这个jsFiddle中，我有四个等比例的框。它们旨在跨越屏幕宽度并保持正方形。其中包含一些示例方形DIV（40％x40％）。我正在努力使文本标签在水平方向和垂直方向居中。 我看过（并尝试过）的所有示例都不起作用，因为它们要求我知道标签的高度，或者它们使用了受浏览器限制的技巧。我需要按照小提琴使用所
-
我在父div中的图标居中（垂直和水平）存在问题。我的页面上有许多大小不同的父div，因此我希望能够按比例将图标放置在每个父div的中心。下面是一个JSFIDLE问题： JSFIDLE公司 HTML CSS
-
我有个问题快把我逼疯了。 我有一个包装器，其中包含一个带有一些文本的div和一个图像。图像和div的大小各不相同。包装器div将调整为较大包装器的大小。 它们都应该垂直对齐，如下所示： 我偶然发现了这个帖子： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 正如你在小提琴上看到的： http://jsfiddle.net