如何解决如何完美地垂直对齐进度条和文本？
我正在尝试制作一个左侧有一些文本的进度条，两者都完美地垂直对齐。但是，我找不到实现这一目标的方法。我已经导入了引导程序供以后使用，但我没有使用引导程序的进度条。这是代码，在此先感谢您 :
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body {
margin: 0;
background-color: #242424;
}
.div-shadow {
Box-shadow: 0 2px 5px 0 rgba(0,0.16),0 2px 10px 0 rgba(0,0.12) !important;
width: 80%;
margin-top: 2rem !important;
margin-bottom: 1rem;
margin: auto;
}
h1 {
font-family: 'Roboto',sans-serif;
text-align: center;
font-size: 4rem;
color: #fff;
margin: 0;
margin-top: 1rem;
}
p {
font-family: 'Roboto',sans-serif;
text-align: center;
font-size: 2rem;
color: #fff;
margin: 0;
margin-top: 0.2%;
margin-left: 5%;
margin-right: 5%;
padding-bottom: 1%;
align-items: flex-start;
}
progress {
float: right;
}
button {
background-color: #161616;
color: #fff;
letter-spacing: 0.2rem;
font-family: 'Roboto',sans-serif;
font-size: 2rem;
outline: none;
border: 2px solid #fff;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50px;
padding: 0.5rem 2rem;
}
button:hover {
background-color: #121212;
cursor: pointer;
}
button:active {
background-color: #000;
}<html>
<head>
<!--Style-->
<link rel="stylesheet" href="style.css">
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJfdroafW" crossorigin="anonymous"></script>
<!--Meta Tags-->
<Meta content="Axqua's Portfolio" property="og:title">
<Meta content="Get to kNow more about me and what I do!" property="og:description">
<Meta property="theme-color" content="#fffff">
<!--Title-->
<title>Axqua's Portfolio</title>
</head>
<body>
<!--Overview-->
<div class="div-shadow">
<h1>Welcome to Axqua's Portfolio!</h1>
<p>Welcome to Axqua's Portfolio! Here you will find information about me and what I do in my life. You will find contact information,my Hobbies and what I service for. Feel free to message me at any time as I will always try to respond as soon as I have time to.</p>
</div>
<!--About-->
<div class="div-shadow">
<h1>About Me</h1>
<p>I am a person from The United Kingdom. I like to make everything work perfectly. In my free time,I like to practice my hobby of scripting as I aspire to become a scripter and a developer as my career. I usually have a lot of time on my hands during the COVID-19 pandemic as everything is practically shut in the UK.</p>
</div>
<!--What I Do-->
<div class="div-shadow" style="padding-bottom: 2%;">
<h1>Hobbies and Skills</h1>
<p>I like to take part in a lot of different things as long as it's helpful and productive. I really like to script as to me it's a huge portal to express what I like to make and it gives me alot of choices to make. I believe it will also be really important in the future as technology is growing and there has to be someone to make it work. Below is how experienced I am with different languages.</p>
<div class="div-shadow">
<p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">
Python
<progress value="75" max="100"></progress>
</p>
</div>
<div class="div-shadow">
<p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">
C#
<progress value="30" max="100"></progress>
</p>
</div>
<div class="div-shadow">
<p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">
HTML
<progress value="20" max="100"></progress>
</p>
</div>
<div class="div-shadow">
<p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">
CSS
<progress value="20" max="100"></progress>
</p>
</div>
<div class="div-shadow">
<p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">
JavaScript
<progress value="15" max="100"></progress>
</p>
</div>
</div>
<!--What I Aspire-->
<div class="div-shadow">
<h1>What I Aspire to Be</h1>
<p>When I am out of school,I want to get qualifications in University for Software Engineering and Programming. I want to become a freelancer and start a contract with huge companies which will stand out and show everyone who I really am. I plan to work very hard in the future and start investing my money that I earn in my own technology based business that I hope will be successful.</p>
</div>
<!--Contact Me-->
<div class="div-shadow" style="padding-bottom: 2%; margin-bottom: 2%;">
<h1>Contact Me</h1>
<p style="padding: 0.2%;">The only current way that you can contact me publicly is discord. Please see my discord information below to make sure you're talking to the right person.</p>
<div class="div-shadow" style="padding-bottom: 1.5%;">
<p style="padding-top: 1%;">Username: Axqua#2244</p>
<p>Client ID: 273927487451561984</p>
<button onclick="discord()">Verify</button>
</div>
</div>
<script type="text/javascript">
function discord() {
window.open("https://discord.com/users/273927487451561984");
}
</script>
</body>
</html>这里也是提供额外灵活性的代码笔： https://codepen.io/axqua/pen/mdrYxpo
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。