英文:
How to center the specific part of a text
问题
Sure, here's the translated code portion you requested:
<div class="text-start">
<p><strong>Email</strong><span class="value">example@example.com</span></p>
</div>
Please note that the code you provided is in HTML and includes some Bootstrap classes and custom CSS styles for formatting. If you have any specific questions or need further assistance with this code, please feel free to ask.
英文:
I'm currently learning bootstrap to design a website. And I'm now creating a profile page of a user. There will be fields (e. g. name, email etc.) and values against them (on one line, if the screen size allows). So I want the field to be at the left, and the value at the center, but I can't find out how to implement it using bootstrap classes and css, if needed. So here is the code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://kit.fontawesome.com/2e9370a952.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Profile</title>
<style>
body {
background: linear-gradient(to right, #7A96E9, #BFAEE0);
text-align: center;
}
.profile-info {
background: white;
border-radius: 4px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container d-flex flex-column justify-content-center" style="height: 100vh">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-10 mx-auto">
<div class="profile-info p-4">
<h1 class="mb-4">Profile</h1>
<div class="text-start">
<p><strong>Email</strong><span class="value">example@example.com</span></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
So here I want "Email" (in the tag "strong") to be at the left of the parent "profile-info" and the span (with class "value") to be centered in that parent.
答案1
得分: 1
将整个父元素的文本对齐方式设置为居中 (Text-Align)，然后使用 position: absolute 将 value 类的元素同时设置 left: 0 和 right: 0，并将 strong 元素浮动到左侧 (float: left)，如下所示：
.text-start p {
text-align: center;
}
.text-start strong {
float: left;
}
.value {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
请注意，这是一段CSS代码，用于样式化HTML中的元素。
英文:
Text-Align the entire parent to center, and then position absolutely with the combination of left:0 and right:0 the value class, and float the strong to the left, Like so:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.text-start p {
text-align: center
}
.text-start strong {
float: left;
}
.value {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/2e9370a952.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Profile</title>
<style>
body {
background: linear-gradient(to right, #7A96E9, #BFAEE0);
text-align: center;
}
.profile-info {
background: white;
border-radius: 4px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container d-flex flex-column justify-content-center" style="height: 100vh">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-10 mx-auto">
<div class="profile-info p-4">
<h1 class="mb-4">Profile</h1>
<div class="text-start">
<p><strong>Email</strong><span class="value">example@example.com</span></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论