Bootstrap Div，文本和图像居中(对齐)
Bootstrap是一个流行的前端开发框架，它提供了一套易于使用的CSS和JavaScript组件，可用于快速构建现代化的网页和应用程序界面。
Div是HTML中的一个元素，可以用来创建一个容器，用于组织和布局其他HTML元素。
文本和图像居中（对齐）是指将文本和图像在其容器中水平和垂直居中显示。
为了实现Bootstrap Div中文本和图像的居中对齐，可以采用以下步骤：
- 创建一个Div容器，并给它一个特定的class属性，例如"container"或"center-align"。
- 在Div容器中添加文本或图像元素。可以使用HTML的<p>元素来创建文本段落，使用<img>元素来插入图像。
- 使用Bootstrap提供的CSS类来实现居中对齐。例如，可以将容器的class属性设置为"text-center"来实现文本水平居中，使用"class=center-block"来实现图像水平居中。
以下是一个示例代码：
<div class="container">
<p class="text-center">这是居中的文本。</p>
<img src="image.jpg" class="center-block" alt="居中的图像">
</div>在这个例子中，我们使用了Bootstrap的"text-center"类将文本居中对齐，并使用了"center-block"类将图像水平居中。
对于图像的垂直居中，可以使用其他CSS技巧，如设置图像的上下边距或使用flexbox布局。
腾讯云提供了一些与Bootstrap和前端开发相关的产品和服务，例如腾讯云Web+和Web应用防火墙等。你可以在腾讯云官网的相关文档中找到更多详细信息和使用示例。
相关·内容
3回答
我有这个： <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="d-flex mb-3">
<div class="align-self-center border rounded p-2">
<img sr
浏览 13提问于2020-01-13得票数 0
回答已采纳
我有两个div必须使用引导类text-center来居中(因为移动的原因)。应用这个类后，图像和文本中心就完美了。然而，我希望文本是居中和左对齐，以便它是准确地符合左边的图像。
我尝试了几种方法:首先以div为中心，然后围绕文本创建div，然后将文本与text-left左对齐。但是，文本并没有保持居中，并一直移动到列的左边。我希望它只像图像一样左转。如果我用像素设置一个边距，使文本与图像左对齐，那么当它被调整大小时，它不会保持响应，而是跳过整个页面。
下面是一个以内容为中心的示例，以及当我将其居中然后左对齐文本时所发生的情况：。
我想知道如何使文本居中，但左对齐仅限于图像的左边。保留text-
浏览 7提问于2016-02-08得票数 5
回答已采纳
2回答
我有以下DIV发行版：
-------------------- --------------------
| large image here | | large image here |
-------------------- --------------------
Text one Text two
here here
图像在DIVs中，文本在DIVs中。我需要文本DIVs与图像DIVs居中对齐，但文本DIVs的内容必须保持左对齐。
PS:无法
浏览 2提问于2020-08-31得票数 0
2回答
我已经使用Twitter Bootstrap将文本和图像并排对齐。你能给出一个如何将文本居中对齐的想法吗？
<div class="row">
<div class="col-sm-1">
<a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px;
浏览 2提问于2017-12-02得票数 0
我正在尝试使用引导类img-responsive和center-block将图像居中对齐。但不知何故，当从浏览器(IE和chrome)测试时，图像不会水平对齐。
奇怪的是，当尝试使用fiddle时，相同的html会将其居中对齐。
你能帮我找出我可以在代码中纠正什么，以便图像在页面上水平居中？
Fiddle在
代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class=&#
浏览 22提问于2016-07-28得票数 0
回答已采纳
2回答
我试图理解文本对齐，但它似乎根据应用于哪种类型的元素以及从何处应用，无论是父元素还是子元素，都有不同的规则。
据我所知，如果我将文本对齐:center应用于div，那么所有包含的元素都将具有文本对齐:center属性。
如果我应用文本对齐:居中于内联元素(如图像)，什么也不会发生，因为图像没有作为元素一部分的周围空间。我有这段代码，我不知道为什么它的行为是这样的。我试图实现的只是简单地在标题标记中水平地对图像进行居中，并以这样的方式实现：
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
浏览 1提问于2022-09-21得票数 -1
1回答
<div class="width_logo">
<div class="left-sidebar col-md-3 thumbnail">
<img src="../images/tech_logos.png" class="tech_logos img-responsive">
</div>
</div>
快速问一句，这对我来说真的很烦人。我的网站包含bootstrap代码。当我添加我的图像并试图将其与文本对齐时，当屏幕变小时，它
浏览 0提问于2016-05-02得票数 1
1回答
我用的是Bootstrap 4，我有这样的一排：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Row -->
<
浏览 1提问于2018-10-20得票数 0
回答已采纳
我正在尝试设计下面的模块，如图所示
建筑物的背景图像与人的图像是分离的，如何使用bootstrap网格系统来对齐图像和文本，同时保持图像的纵横比？
背景图像扩展到100%，但内容和人物图像居中并与其他内容对齐
浏览 0提问于2016-12-01得票数 2
1回答
如何在bootstrap 4中居中对齐分页？我放置了代码，分页一直按在左边，但它需要居中。我对父元素应用了类text-center，它也没有帮助，虽然文本对齐了，但由于某些原因，它不能与分页一起工作。 <div class="text-center">
{{$posts->links('vendor.pagination.bootstrap-4')}}
</div>
浏览 15提问于2020-09-30得票数 0
1回答
<div style="width:400px">
<p style="text-align:center">
<a>
<img src"..." />
</a>
Some text..
</p>
</div>
因此，这里的目标是在div中居中显示图像。文本对齐:居中处理不在超链接标记内的图像，但一旦它们在超链接标记内，它不会影响它们，只影响文本。
我不想使用display:block和margin left / rig
浏览 2提问于2013-09-19得票数 1
有人知道为什么text-align: center和text-align:-webkit-center有区别吗？例如，如果您有：
<section>
<h1>Title<h1>
<div class="image"></div>
</section>
// CSS与文本对齐:居中；
section{
text-align: center;
}
这将仅使文本居中
// CSS with text-align：-webkit-center
section{
text-align: -webkit-ce
浏览 0提问于2016-02-01得票数 22
我有一个小问题，但我不能解决它。我有一个864px宽度的内容标题，背景图像重复-y和页脚图像。现在我有了背景图像上的这个<div>，我希望它的宽度大约为855px，文本左对齐，但居中对齐，以便它适合bg。
我有一次它的宽度，一些填充左，但我认为这是正确的填充我的屏幕分辨率。
简单来说就是:设置一个div的宽度-- div居中对齐--文本(内容)左对齐。
浏览 1提问于2011-08-05得票数 26
1回答
我想在下面的网站上创建一个类似于Meet us/find us/follow us/ask us/latest items文本的效果，文本上方的图像居中。
()
我已经尝试过表格，并且有一个2列的垂直div，但是文本和图像永远不会精确对齐。
我已经尝试了文本居中对齐，它在一定程度上有效，但不适用于多个图像。
浏览 1提问于2013-07-04得票数 0
我想在bootstrap列中使用我认为应该基于文档的方式将4个图像对齐到水平的右侧和垂直的中间。阅读文档，但它似乎没有说明当您想要中间垂直对齐和右水平对齐时该做什么。认为文本和图像应该是相同的，因为它们都是内联的，但也可能不是。 https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment https://getbootstrap.com/docs/4.0/utilities/vertical-align/ 我还看到了这个，Trying to align an image to the right middle of a c
浏览 12提问于2020-09-18得票数 1
回答已采纳
我正在使用bootstrap开发我的第一个网站。我使用javascript将我的图像垂直居中，但我注意到，有时javascript会在一些图像之前加载，因此这些图像不会居中。
Html：
<div class="hidden-xs col-sm-3 text-center">
<img src="../img/body/gear.png" alt="gear.png" class="scale-icon pull-center" />
</div>
JavaScript：
<
浏览 0提问于2015-10-22得票数 0
15回答
假设我有一个bootstrap按钮，上面有一个非常棒的字体图标和一些文本：
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
如何使文本垂直居中显示？文本现在与图标的下边缘对齐：
浏览 12提问于2013-06-26得票数 259
回答已采纳
3回答
我正在开发一个bootstrap风格的网站，我有文本需要居中。我已经使用center align将它在水平维度居中，但我不知道如何在行中垂直居中。
<div class="col-md-6">
<p align="center">Some Text that needs centering.</p>
</div>
“align=”center“”负责水平对齐，但我不知道如何将文本放在行的绝对中心。
浏览 5提问于2014-05-02得票数 2
在我的项目中使用按钮时...它们公开一个名为TextImageRelation的属性。它用于告诉控件将按钮图像与文本相关的位置(我使用的是ImageBeforeText选项)。现在，我需要将文本居中对齐。
我将spect的逻辑结果是:图像左对齐，按钮文本居中，图像和按钮的右边界之间的空间居中。
但不是..。文本与图像对齐或居中对齐，但不考虑图像(不确定大小写)。
有什么方法可以改变这种行为吗？
浏览 2提问于2010-12-03得票数 1
回答已采纳
我有2列与响应式背景图像和文本覆盖垂直居中。如何使文本覆盖根据图像的自动调整大小做出响应？换句话说，文本应该始终基于图像高度垂直居中。
我遇到的问题是，我必须定义一个高度，以使文本首先垂直对齐(例如，尝试删除高度，文本将顶部对齐)。当改变屏幕宽度时，背景的300px高度被忽略(有意)，并带有' background -size: 100% auto;‘。但这并不适用于文本，因为它一直以300px的高度为中心。我如何才能在不使用不同大小的各种媒体查询的情况下解决这个问题？
.two-pics-1 {
background-image: url('http://via.pl
浏览 0提问于2017-11-12得票数 0
3回答
我有以下标记(Bootstrap 4)： <div class="col-3 d-flex flex-column">
<img class="align-self-center" src="#"/>
</div> 由于容器是弯曲的，所以图像是拉伸的。我知道align-self-center会解决这个问题，但是，我不希望图像居中。我希望图像是align-self-left (左对齐而不是居中)，但这再次拉伸了图像。 有什么办法可以解决这个问题吗？
浏览 19提问于2019-05-29得票数 1
回答已采纳
我在bootstrap的一个项目中工作，我的问题是我想要将导航栏中的文本居中对齐，并将字形图标对齐到右，我尝试了导航栏-右对齐和文本居中对齐，但它不适合我，请在这方面帮助我。
toggle navigation logo here
<h4 class="navbar-text">SOME TEXT HERE</h4>
<ul class="nav navbar-nav
浏览 3提问于2018-09-21得票数 0
2回答
我正在努力使用flexbox容器和bootstrap 4对齐以水平为中心的元素。
到目前为止，这就是我所拥有的：
<div class="d-flex flex-column align-items-center">
<img class="rounded-circle" height="50">
<a href="https://some.external.link" target="_blank">
Follow me
<
浏览 0提问于2018-02-05得票数 0
回答已采纳
1回答
将图像与文本对齐
、、
我在将图像与文本对齐时遇到问题。我希望我的图像在左边，文本在右边，垂直居中到图像。
<div class="container">
<span class="icon">
<img ... />
</span>
<span>555-1212</span>
</div>
现在，文本紧挨着容器的顶部。我如何将它垂直居中到容器的中间？
浏览 0提问于2014-09-11得票数 3
3回答
引导列中垂直居中响应图像
、、、、
我已经检查了所有现有的问题/答案，但仍然无法获得有效的解决方案，因此，如果您对我下面的特定代码有任何意见，我将不胜感激。
我不喜欢在代码中使用硬编码的图像大小(像素计数)，并且我愿意在解决方案中使用Less、CSS或Javascript的组合。
图像应该在Bootstrap列中垂直和水平居中，并且即使调整了屏幕大小也保持居中。
我的HTML：
<div class="container-fluid">
<div class="container">
<div class="row">
浏览 7提问于2014-12-16得票数 5
目标:使用Bootstrap将文本和图像的段落排成一行，并适当调整大小。我很惊讶我发现这很棘手。
我希望段落垂直居中，以便与图像对齐。到目前为止，如果屏幕太大，文本比图像要高得多。我想让它垂直居中。或者，如果屏幕较小，则图像高于文本。有人能建议我如何使用Bootstrap来实现这一点吗？当前代码和下面的小提琴。谢谢你的帮助！
查看
下面是我的代码：
<div id='sectionTwo' >
<div class="container-fluid">
<div id='' class="
浏览 2提问于2017-10-23得票数 0
我有一个div容器，在这里我想放一个居中的图像和一个小的描述在右边。规格如下：
图像的底部边缘应为35 of。
图像应该始终在屏幕上完全显示，因此当屏幕显示时它会调整大小。它应该有尽可能大的大小，但不要被裁剪，永远不要使用滚动条。
图像应该相对于容器居中，文本显示在右边的边缘。
文本应该水平地左对齐，中心垂直对齐，并与图像有30 be的距离。
我尝试过在容器中使用table并使用div，但是找不到干净的解决方案。我可以给你看我按要求试过的不工作代码。
浏览 0提问于2013-06-28得票数 2
1回答
我希望创建一个样式，我可以重复使用，将创建以下布局。放置一个图像并将其向左浮动，然后将带有或不带有段落标记的文本放在所述图像的右侧。文本将与左侧图像的顶部对齐。
我可以实现所有的功能，除了文本不在顶部。这是我到目前为止所做的，文本居中，而不是顶部对齐。
<div style="overflow:auto">
<div style="float:left">
<a href="Images/img.jpg"><img src="Images/img.jpg" /></a&
浏览 0提问于2013-04-16得票数 0
回答已采纳
3回答
将图像居中对齐。我使用的是3.3.7版本的bootstrap。我尝试使用文本居中或style=“文本对齐:居中”对我不起作用 <div class="row">
<div style="overflow:hidden" class="col-sm-8">
<img src="../../../../Images/ThinkstockPhotos-457383369.jpg" />
</div>
</div>
浏览 24提问于2019-01-05得票数 0
我将twitter bootstrap navbar集成到我的asp.net项目中。但是，我正在尝试将我的引导文本居中对齐。这是我的导航栏的源代码
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-n
浏览 0提问于2013-08-22得票数 3
回答已采纳
如何将所有divs对齐到同一行的中心。我的意思是，我想让按钮居中，像这样的图像，例如，社交图标居中像文本一样，而不是像我的在黑暗中
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
<div class="container d-f
浏览 38提问于2020-02-12得票数 0
回答已采纳
1回答
我有一个问题，我如何在div中居中图像？将文本放在左边，图像放在右边。此div的高度不是在CSS中设置的，因为我希望在添加更多文本时自动增加高度，并且希望图像始终垂直居中。这个是可能的吗？
<div class="container">
<div class="text">
<h2>Hello</h2>
<p>BlaB
浏览 0提问于2015-09-27得票数 0
我试图在页面中间对齐一个图像，同时也对齐一些文本到图像的右边。我如何在css或html中做到这一点？
以下是我目前在这方面的尝试：
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
&l
浏览 11提问于2016-08-26得票数 3
回答已采纳
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：
下面是我的HTML和CSS的jsfiddle：
我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶部)，并使logo图像在该div内居中，水平和垂直居中，就像现在一样？
浏览 2提问于2012-10-16得票数 1
回答已采纳
3回答
我有一个Bootstrap行，其中包含一些列。在这些列中，我在<'a'>和<'/a'>之间添加了一个带有文本和图像的span标记。我需要文本与图像垂直对齐，现在它总是放在列的顶部。我尝试了垂直对齐:居中，但没有成功。
<div class="row">
<div class="container">
<div class="col-md-2 col-md-offset-5">
<a href="http://www.x
浏览 2提问于2015-03-05得票数 3
1回答
我有这个HTML：
<td>
<ol start="4">
<li>
<div style="float:left;">some text</div>
<div style="float:right;">
<img style="vertical-align:middle;" src="pic.png" />
浏览 3提问于2012-10-01得票数 1
回答已采纳
我想在Bootstrap容器中将每个图像垂直居中。每个图像都使用"img-fluid“类，这样它就占据了相对于屏幕大小的整个列的宽度。通常，我会在图像顶部添加50%的边距，并抵消图像大小等于px图像大小一半的负边距，但是由于图像大小不是恒定的，这将不起作用。我尝试使用“垂直对齐:居中”来居中图像，但是这似乎也不起作用。
HTML：
<div class = "container-fluid">
<div class = "row text-center">
<div class = "col-
浏览 1提问于2020-01-10得票数 0
我有html格式：-
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 text-left">
<p>
© 2015 example.com. All rights reserved.
</p>
</div>
浏览 44提问于2015-04-10得票数 65
1回答
我尝试过各种不同的方法，包括在<div>上使用text-align: center;，在<p>和<h4>上使用display: inline-block;。因为我在div中有3个不同的文本标记，所以我试图对齐，这只会使文本看起来居中，而不是与左边对齐。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.media-body {text-align: center;}
p {display: inline-bloc
浏览 6提问于2016-06-10得票数 1
回答已采纳
4回答
我想在CSS框中垂直对齐一些文本和图像。
我尝试了几种方法，下面是我尝试的最后一种方法的代码，名为"display:table-cell-method“
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>
以下是火狐最新版本的结果屏幕截图：
图像居中正确，文本居中几乎正确。它位于图
浏览 1提问于2009-12-29得票数 2
回答已采纳
我刚接触html和堆栈溢出。我现在正在学习一门关于bootstrap框架的课程。有没有一种方法可以将标题文本居中放置在分配了role=“按钮”的标签中？
我尝试使用普通文本，文本出现在我想要的位置，但字体粗细太小。我试着让它变得大胆，但那太重了。h6标签给了我理想的重量，但我无法水平居中，因为它出现在顶部。最好是，如果可能的话，我想使用bootstrap。
下面是我当前的代码：
<div class="col col-sm align-self-center">
<a href="#reservationForm" clas
浏览 0提问于2020-07-17得票数 0
我有一个div应该是全宽度(它有一个背景图像，应该跨越整个页面)，我希望内容有一个固定的宽度和居中。
在没有centered-content div的情况下，有办法做到这一点吗：
<div class="background">
<div class="centered-content">My content</div>
</div>
这就是我想要达到的目标(只有一个div)：
编辑：我不希望文本居中。我想要一个400px宽中心文本框，其中包含左对齐的文本。
浏览 8提问于2014-05-22得票数 1
回答已采纳
1回答
我正在使用Boostrap4，并试图创建一个简单的4*4网格的div，其中有一个图像和一些文本。最初，我尝试在一行中嵌套6列，结果如下所示：
所以这里的问题是图片不在列的中心。因此，接下来我在行上使用了text-center。这很有效，但现在当我希望文本与图像的左侧对齐时，文本也会居中：
所以我最终放弃了所有这些，去掉了bootstrap的行和列，并尝试使用bootstrap的flex类。它的一般结构如下：
<div class="d-flex justify-content-around">
<div class="d-f
浏览 1提问于2018-05-14得票数 0
3回答
我已经看到超过10个stackoverflow问题和他们的答案，到目前为止还没有一个有效。
我在bootstrap列中有文本，但它只是位于列的顶部。我需要它居中，最好是居中与图像的关系。
我使用的是媒体对象，但它看起来不适合较小的设备。
这就是我所拥有的：
<div class="container">
<div class="row">
<div class="col-md-5">
...img stuff..
</div>
<div cl
浏览 0提问于2015-03-12得票数 0
使用Vuejs和Bootstrap v5.0.1，我使图像在左边和文本右对齐，并使用代码：
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned" :src="itemDetailsImage.url" >
</div>
<div class=&
浏览 11提问于2022-03-25得票数 0
回答已采纳
我正在使用bootstrap来布局我的网站。除了文本"THIS is TEST“的垂直对齐之外，一切都很好。我使用了我在网络上找到的不同的方法，例如，结合垂直对齐:居中和文本对齐:居中和弹性框。所有这些都没有生成正确的垂直对齐方式。下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name=&#
浏览 6提问于2016-12-23得票数 0
回答已采纳
23回答
这可能是一个愚蠢的问题，但由于通常的居中对齐图像的方法都不起作用，我想我会问。如何在图像的容器div内居中对齐(水平对齐)？
这是HTML和CSS。我还包含了缩略图的其他元素的CSS。它按降序运行，因此最高的元素是所有内容的容器，最低的元素是所有内容的容器。
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding:
浏览 17提问于2012-06-12得票数 451
回答已采纳
因此，我和一位朋友正在尝试将文本悬停在图像上并将其居中。我们使用的是bootstrap，所以我们有一个有响应的div，图像也是，所以如果我调整页面的大小，图像会变小，但不会居中，也不会调整大小
那么，我们如何才能使它正确、可调整大小并水平和垂直居中呢？
浏览 0提问于2014-03-31得票数 0
我有一个简单的Bootstrap 4行：
<div class="container">
<div class="row">
<div class="col-md-12 p-2">
<img class="" src="../assets/img/Logo-small.png" alt="">
</div>
</div>
我希望每当我在小型设备(col
浏览 1提问于2018-06-07得票数 14
回答已采纳
我经常遇到这个挑战--当我试图解决这个问题时，我总是在想我是不是做错了。
在'div‘中，我想把图像放在左边--一些相应的文本放在右边--我想让它们垂直居中显示。做这件事最好的方法是什么？
目前，我的xhtml如下所示：
<div class="key">
<img alt="required" src="/images/forms/asterisk.png?" /> required
</div>
下面是它的当前外观-- (您将看到星号图像与“必需”文本没有垂直对齐。哇哦。
我通常会考虑绝对定位图
浏览 2提问于2010-01-22得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
