CSS引导中心所有项目
CSS引导中心所有项目
提问于 2021-10-25 11:39:29
我正在使用灰度引导主题的修改版本：https://startbootstrap.com/theme/grayscale
我似乎无法让非文本的项目居中对齐。它们之前都以大量奇怪的空格结束(参见我突出显示空格的屏幕截图)
如何创建css样式以确保始终以其为中心？
查看下拉列表，img添加的内容位于右侧，未与文本对齐。理想情况下，我希望它尽可能紧凑，没有空格。
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container">
<!-- Featured Project Row-->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<div class="featured-text text-center text-center">
<form class="text-white-50 mx-auto mt-2 mb-5" method="POST" action="/result">
<h1>Lineup:</h1>
<div class="text-pre">
<p><h3><b>Team A: {{ scorea }}</b></h3></p>
<select id="changeImageA">
<option>other</option>
<option>blue</option>
<option>white</option>
<option>black</option>
<option>red</option>
</select>
<img id="imageA" src='/static/other.png' width="50" height="60">
<p>{% for player in teama %}{{ player }}<br>{% endfor %}</p>
</div>
<div class="text-pre">
<p><h3><b>Team B: {{ scoreb }}</b></h3></p>
<select id="changeImageB">
<option>other</option>
<option>blue</option>
<option>white</option>
<option>black</option>
<option>red</option>
</select>
<img id="imageB" src='/static/other.png' width="50" height="60">
<p>{% for player in teamb %}{{ player }}<br>{% endfor %}</p>
</div>
<h3><b>Save lineup?</b></h3>
<input class="btn btn-primary js-scroll-trigger" type="submit" name="submit_button" value="Store">
<input class="btn btn-primary js-scroll-trigger" type="submit" name="submit_button" value="Rerun">
</form>
</div>
</div>
</div>
</div>
</section>
以下是我的style.css版本：
https://github.com/bignellrp/footyapp/blob/main/static/styles.css
我尝试了以下方法，但没有什么不同，尽管我不确定如何自动清除css缓存。
CSS
.center-item {
display: block;
margin-left: auto;
margin-right: auto;
}
.center-text {
text-align: center;
}HTML
<div class="center-item"> <select id="changeImageA">URL
回答 2
Stack Overflow用户
发布于 2021-10-25 11:48:51
您可以使用flex显示容器来根据需要对齐任何类型的元素，下面是一个示例。
div {
display:flex; /* set the flex display on all div elements */
align-items:center; /* align items to center */
flex-direction:column; /* align in a column instead of a row which is default */
width:80vw;margin-left:10vw;
}
.rect {
background:red;
width:100px;height:25px;
}
button {
align-self:flex-end; /* you can specify a different alignment rule for a given element * /
}<div>
<button>a button</button>
<p>Some paragraph text</p>
<div class="sub-container">
<span>some other span</span>
<span class="rect"></span>
</div>
</div>
Stack Overflow用户
发布于 2021-10-25 13:43:41
我找到了这个来解决这个问题
http://jsfiddle.net/jj4B8/2/
#wrapper {
text-align:center;
}
.form-control {
margin: 0 auto;
height: 50px;
width: 330px;
padding-left: 5px;
font-size: 20px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69707422
复制相关文章
相似问题
腾讯云开发者
