为什么我不能把这段文字集中起来？
为什么我不能把这段文字集中起来？
提问于 2019-06-17 02:54:51
所以我想把.phrase-wrap放在中心，这个div和主标头图像一起位于.carousel内部。使用柔性盒将无法工作，因为图像与.phrase-wrap是兄弟关系，所以我知道的唯一其他方法是将.phrase-wrap设置为绝对位置，然后使顶部、底部、左侧、右侧为0；以及自动移动边距。只是把它移到顶部，如图所示
有什么想法吗？
p.s这个最初创建这个网站的家伙有多个css文件，很抱歉，所有的东西都没有样式
#first-block, #second-block, #third-block, #fourth-block {
text-align:center;
padding:3.5rem 0;
}
#carousel {
text-align:center;
background:#e5e5e5;
position: relative;
display: flex;
flex-direction: column;
}
#carousel .header-img {
width: 100%;
}
.phrase-wrap {
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
#first-block {
background:#fff;
}
#second-block {
background:#e5e5e5;
}
#third-block {
background:#fff;
}
#fourth-block {
background:#e5e5e5;
}
footer {
background:#fff;
padding:3.5rem 0;
}
@media screen and (max-width: 768px) {
.right {
float:none;
}
}<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Gilbert Moving and Storage | Business and Residential Moving Services
</title>
<meta name="description" content="Gilbert Moving & Storage offers Residential and Business moving services. Based out of Gilbert AZ, we can service moves ranging from within the Phoenix valley to nationwide.">
<meta name="keywords" content="Gilbert Moving, Moving Services, AZ Moving Services, Residential Moving, Business Moving">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- CUSTOM STYLE -->
<link rel="stylesheet" href="css/template-style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<meta name="google-site-verification" content="sIiz7-Oic2Oz1NAPxWDTYSdWosvJHTekqTHo3fOoUmo" />
</head>
<body class="size-1140">
<!-- TOP NAV WITH LOGO -->
<header>
<nav>
<div class="line">
<div class="s-12 l-2">
<a href="index.html">
<img class="s-5 l-12 center" src="img/GilbertMoving_3e.png">
</a>
</div>
<div class="top-nav s-12 l-10 right">
<p class="nav-text">
Menu
</p>
<div class="phone">
<a href="tel:480-825-8648">
(480) 825-8648
</a>
</div>
<ul class="right">
<li>
<a href="/index.html">
Home
</a>
</li>
<li>
<a href="/gallery.html">
Gallery
</a>
</li>
<li>
<a>
Testimonials
</a>
</li>
<li>
<a href="/request-a-quote.html">
Request a Quote
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- CAROUSEL -->
<section>
<div id="carousel">
<img src="https://images.pexels.com/photos/2419009/pexels-photo-2419009.jpeg?cs=srgb&dl=beach-clouds-dramatic-2419009.jpg&fm=jpg" alt="header-img" class="header-img">
<div class="phrase-wrap">
<div class="phrase">Here's some catchy phrase for yah.</div>
<div class="quote-btn">Get a quote</div>
</div>
<!-- <div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="img/truck4.jpg" alt="Residential and Business Moving Services">
<div class="line">
<h2>
Residential & Business Moving Services
</h2>
</div>
</div>
<div class="item">
<img src="img/packed-truck-slide.jpg" alt="Moving Services in Gilbert AZ">
<div class="line">
<h2>
Expert Packing & Care
</h2>
</div>
</div>
<div class="item">
<img src="img/phone-slide.jpg" alt="Moving Services Free Quote">
<div class="line">
<h2>
Call Today for a Free Quote -
<a href="tel:480-825-8648">
(480) 825-8648
</a>
</h2>
</div>
</div>
</div> -->
</div>
<!-- FIRST BLOCK -->
<div id="first-block">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-message icon3x"></i>
<h2>
About Us
</h2>
<p>
Gilbert Moving & Storage is a family owned and operated business that takes Honesty, Integrity and reliability very seriously. Located in downtown Gilbert, we operate mostly throughout the Phoenix metro area and serve all of Arizona.
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-star icon3x"></i>
<h2>
Our Promise
</h2>
<p>
Providing our customers with all of their Residential & Commercial moving needs. We will try our best to make your next move as painless and as stress-free as possible. Our Promise to you is that you will always be met with hard working, reliable, and professional movers.
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-paperplane_ico icon3x"></i>
<h2>
Services
</h2>
<p>
- Local and Long Distance
<br /> - Commercial or Residential
<br /> - Packing/Unpacking Your Items
<br /> - Loading/Unloading PODS
<br /> - Load/Unload Assistance
<br />
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-mail icon3x"></i>
<h2>
Contact
</h2>
<p>
We will be happy to answer any questions or concerns you may have about our services or the moving process. Call us at
<a href="tel:480-825-8648">
(480) 825-8648
</a>
or
<a href="/request-a-quote.html">
click here
</a>
to request a quote online.
</p>
</div>
</div>
</div>
</div>
<!-- SECOND BLOCK -->
<div id="second-block">
<div class="line">
<div class="margin-bottom">
<div class="margin">
<article class="s-12 m-12 l-8 center">
<h1>
Helping You Move Forward
</h1>
<p>
Gilbert Moving & Storage offers services at an affordable price. Just tell us about your moving needs and we will provide you with quality service that you and your family can count on. You can submit a quote either online by
<a href="/request-a-quote.html">
clicking here
</a>
, or you can contact us by phone at
<a href="tel:480-825-8648">
(480) 825-8648
</a>.
</p>
</article>
</div>
</div>
</div>
</div>
<!-- GALLERY -->
<div id="third-block">
<div class="line">
<h2>
Serving Arizona Residents & Businesses
</h2>
<div class="margin">
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/TruckLoad.JPG">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/supplies.jpg">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/pad.jpg">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/boxes2.jpg">
</div>
</div>
</div>
</div>
<!-- Review Links -->
<div id="fourth-block">
<div class="line">
<h2>
Leave us a Review
</h2>
<div class="margin">
<div class="s-12 m-6 l-4">
<a href="https://www.google.com/search?q=Gilbet+Moving+%26+Storage+Mesa+AZ&oq=Gilbet+Moving+%26+Storage+Mesa+AZ&aqs=chrome..69i57.11701j0j1&sourceid=chrome&ie=UTF-8#q=Gilbert%20Moving%20%26%20Storage%20Mesa%20AZ&tbs=lf_od:-1,lf_oh:-1,lf_pqs:EAE,lf:1,lf_ui:3&rflfq=1&rlha=0&rllag=33380742,-111701127,8192&tbm=lcl&rldimm=2587546689305519927&lrd=0x872bb10b64bd1fa1:0x23e8d00127cb2737,3," target="_blank">
<img class="margin-bottom" src="img/google-logo-3.png">
</a>
</div>
<div class="s-12 m-6 l-4">
<a href="https://www.yelp.com/biz/gilbert-moving-and-storage-mesa-2" target="_blank">
<img class="margin-bottom" src="img/Yelp-Logo-2.png">
</a>
</div>
<div class="s-12 m-6 l-4">
<a href="https://www.facebook.com/gilbertmoving/" target="_blank">
<img class="margin-bottom" src="img/facebook-logo-330-3.png">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="line">
<div class="s-12 l-6">
<p>
<span style="font-size: 10px;">
Copyright 2018, Gilbert Moving and Storage
</span>
</p>
</div>
<div class="s-12 l-6">
</div>
</div>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-90548139-1', 'auto');
ga('send', 'pageview');
</script>
</footer>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#owl-demo").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: true,
singleItem: true
});
$("#owl-demo2").owlCarousel({
slideSpeed: 300,
autoPlay: true,
navigation: true,
pagination: true,
singleItem: true
});
});
</script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-17 03:46:57
以下是我用来找到答案的参考资料的一些链接：
- https://css-tricks.com/centering-css-complete-guide/
- https://www.w3.org/Style/Examples/007/center.en.html#hv3
看上去你真的很亲密！而不是使用边距自动，它的中心水平，您将有50%的空白和转换属性。但是，对于transform属性https://caniuse.com/#feat=transforms2d，检查浏览器兼容性是很重要的。下面是用于居中的代码：
.phrase-wrap {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56624198
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号