如何在<pre>标签旁边垂直居中/对齐文本

时间：2019-09-30 08:20:41

标签： html css

我正在尝试将预格式化的信用卡号旁边的“信用卡”文本垂直居中。如何获取，以便“信用卡”文本与“ **** **** **** 0000”一致？

<div class="form-group">
    <input type="radio" checked></label>
    <label class="radio-inline">
        Credit Card <pre style="margin-left: 8px; float: right; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>

哪个产生这个：

enter image description here

3 个答案:

答案 0 :(得分：0)

检查一下：

<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <input type="radio" checked></label>
    <label class="radio-inline">
        Credit Card <pre style="margin-left: 8px; display: inline-block; vertical-align: middle; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>
</body>
</html>

答案 1 :(得分：0)

您只需要删除float: right并添加display: inline

答案 2 :(得分：0)

您可以查看以下内容：

<div class="form-group" align="center" >
    <input type="radio" checked>
    <label>
        Credit Card <pre style="margin-left: 8px; display: inline; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>
相关问题
最新问题