英文:
Positioning text center with bootstrap 5 flex
问题
在这些div中：
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
<div>
<i class="fa fa-th-list me-2"></i> Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
如何在屏幕变小的情况下将文本正确居中对齐？我是指像我的下面照片中那样。
或者我应该在超链接中使用3个div，并将文本放入第二个div中？
在图片上，第三张照片是我的，上面有一个红色的X。
英文:
In these divs:
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
<div>
<i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
How can i align the text correctly center, when the screen is small? I mean it like on my photo below.
Or i should use 3 div in the hyperlink, and put the text into the 2nd div?
On the picture, the 3rd photo is mine, with a red X.
答案1
得分: 1
在图标和文本（左侧）的父标签中添加 "d-flex align-items-center" 类：
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category text-dark border text-decoration-none rounded-2 d-flex justify-content-between align-items-center radius p-3">
<div class="d-flex align-items-center">
<i class="fa fa-3x fa-th-list me-2"></i> Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
英文:
Add "d-flex align-items-center" classes at the parent tag of the icon & text(Left side)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category text-dark border text-decoration-none rounded-2 d-flex justify-content-between align-items-center radius p-3">
<div class="d-flex align-items-center">
<i class="fa fa-3x fa-th-list me-2"></i>Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
<!-- end snippet -->
答案2
得分: 0
为了在屏幕小的情况下正确居中文本，您可以使用Flexbox或Bootstrap的实用类。在这种情况下，使用Bootstrap的实用类会更简单，与您现有的代码更一致。您可以将text-center类添加到外部<div>，以使超链接中的文本居中对齐。此外，如果您想要将图标居中对齐，可以将d-flex justify-content-center类添加到第一个内部<div>。
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
<div class="d-flex justify-content-center align-items-center">
<i class="fa fa-th-list me-2"></i> Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
请注意，我没有翻译代码部分，只翻译了您提供的文本内容。
英文:
To align the text correctly in the center when the screen is small, you can use Flexbox or Bootstrap's utility classes. In this case, using Bootstrap's utility classes would be simpler and more consistent with your existing code. You can add text-center class to the outer <div> to center-align the text inside the hyperlink. Additionally, if you want to center-align the icon, you can add d-flex justify-content-center classes to the first inner <div>.
<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
<a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
<div class="d-flex justify-content-center align-items-center">
<i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>
<div>
<i class="fa fa-chevron-right"></i>
</div>
</a>
</div>
答案3
得分: 0
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@media only screen and (max-width: 600px) {
.text-font {font-size: 10px;}
}
<!-- language: lang-html -->
<div class ="text-font">
<i class="fa fa-th-list me-2"></i>减小移动视图时的 Gépi alapvakolat 字体大小，使用上面的媒体查询
</div>
<!-- end snippet -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@media only screen and (max-width: 600px) {
.text-font {font-size: 10px;}
}
<!-- language: lang-html -->
<div class ="text-font">
<i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>
<!-- end snippet -->
reduce fonts size of Gépi alapvakolat when mobile view by above media query
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论