我试图将移动屏幕徽标下方的"迎接"直接集中。无论我做什么，似乎都没有用。问候一直保持在右边。我尝试在带有和不带有引导列的带有和不使用Bootstrap列的显示值，边距，填充物周围和更改。没有什么可用:(请帮助？
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
@media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
float: none;
height: 30%;
width: 50%;
margin-right: auto;
margin-left: auto;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
margin-right: auto;
margin-left: auto;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>具有float属性而不是h1/h2的#greet。您指的是@Media代码中的H1/H2，而不是更改#GREET本身的浮动值。从@Media部分中删除"> H1"one_answers"> H2"，这将为您带来想要的东西。
清除 float和 padding，并且有效：
#greet {float: none; padding-left: 0; }
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
@media screen and (max-width: 570px) {
#greet {float: none; padding-left: 0; }
div.A > #logo {
display: block;
text-align: center;
float: none;
height: 30%;
width: 50%;
margin-right: auto;
margin-left: auto;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
margin-right: auto;
margin-left: auto;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>