css Html：将两个div垂直居中，并将其中一个对齐在左侧，另一个对齐在右侧

ego6inou 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(193)

我正在使用Bootstrap来设计我的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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

    <div class="container">
        <div class="row align-items-center">        
            <div class="col align-self-start">
                Hello
            </div>
            <div class="col align-self-end">
                World
            </div>
        </div>
    </div>
</body>
<script src="script.js" defer></script>
</html>

我已经尝试了不同的方法，但很少变化，无论我如何编辑我的代码。

css

来源：https://stackoverflow.com/questions/74999270/html-centering-two-div-vertically-and-allign-one-of-them-in-the-left-side-and-t

3条答案

按热度按时间

vcudknz31#

Bootstrap有用于垂直对齐的类。您可能需要align-middle-bootstrap docs

赞(0）回复(0）举报 2023-01-10

wnvonmuf2#

也许你的意思是对齐文本？如果你的意思是文本到列的整个"块"，这个问题有点不清楚。

.container *,.container-fluid *  {
  border: solid 1px pink;
  padding: 1rem;
}
.test-high{height: 14rem;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container ">
  <div class="row align-items-center test-high">
    <div class="col text-left">
      Hello
    </div>
    <div class="col text-right">
      World
    </div>
  </div>
</div>
<div>A ml-auto example for the entire div removed the col class</div>
<div class="container">
  <div class="row test-high align-items-center ">
    <div>Hello</div>
    <div class="ml-auto">World</div>
  </div>
</div>
<div>A col example for the entire div as a column - note content may get outside its container col-1 and need say col-2 etc. ml-auto does the fun alignment</div>
<div class="container-fluid">
  <div class="row test-high align-items-center ">
    <div class="col-1">Hello</div>
    <div class="ml-auto col-1">World</div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-10

mf98qq943#

body, html {
  height: 100%;
  background:#c9edff;
}
body {
margin: 0;
background: teal;
}
a {
  text-decoration: none;
  color: black;
  font-family: 'roboto';
}
.align-self-start {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
padding-left: 10px;
margin: 0 auto;
left: 0%;
background: whitesmoke;
padding: 10px;
box-shadow: 0px 0px 1px;

}
.align-self-start li {
padding-left: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
padding-right: 10px;
margin: 0 auto;
right: 0%;
background: darkgreen;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-end li {
padding-right: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end a {
color: yellow;
margin: auto;
}
.nav_bar {
width: 100%;
background: lightblue;
display: inline-flex;
}
.nav_bar li {
margin: auto;
list-style: none;
}
.nav_bar a {
color: black;
}
a {
margin: auto;
text-align: center;
}
.border_form {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.border_form input{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
}
.border_form input:focus{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
.border_form button {
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
footer  {
  bottom: 0;
  box-shadow: 0px 0px 1px;
  background-color: yellow; 
  position: absolute;
  width: 100%;
    text-align: center;
}
footer li { 
list-style: none;
display: inline-flex;
    }
  footer a { 
padding-left: 10px;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Title</title>
  </head>
  <body>
<div class="nav_bar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>

</ul>
</div>
<div class="border_form">
<form>
<input type="text" class="username_css" placeholder="Username">
<br>
<br>
<input type="password" class="password_css" placeholder="Password">
<br>
<br>
<button type="submit">Login</button>
</form>
</div>
<div class="container">
        <div class="row align-items-center">       
            <div class="col align-self-start">
              <ul>
              <li><a href="#">Hello 1</a></li>
               <li><a href="#">Hello 2</a></li>
                <li><a href="#">Hello 3</a></li>
                 <li><a href="#">Hello 4</a></li>
                 </ul>
            </div>
            <div class="col align-self-end">
              <ul>
             <li><a href="#">World</a></li>
               <li><a href="#">World 2</a></li>
                <li><a href="#">World 3</a></li>
                 <li><a href="#">World 4</a></li>
                 </ul>
            </div>
        </div>
    </div>
    <footer>
      <ul>
                 <li><a href="#">Footer</a></li>
               <li><a href="#">Footer 2</a></li>

                <li><a href="#">Footer 3</a></li>
                </ul>
    </footer>
    </body>
    </html>

//for all 1080p screens它已经更新了。这个方法可以在任何浏览器上工作。如果它在任何其他浏览器上都不工作..那么你需要使用

@media only screen and (max-width: 1920px) {
.your_div {

}
}
// for iphone se
@media only screen and (max-width: 375px)  {
.your_div {

}

}

^^你需要加上

赞(0）回复(0）举报 2023-01-10

我来回答

css Html：将两个div垂直居中，并将其中一个对齐在左侧，另一个对齐在右侧

3条答案

相关问题

热门标签

最新问答