响应式文本定位?
Responsive text positioning?
我使用 Bootstrap 带文本的轮播滑块(轮播字幕)。它在所有设备上都有响应,但文本始终居中并位于屏幕底部。我知道如何将文本放在我想要的位置。
但是如果我改变位置,它就不能在其他设备上正确显示。我只想将文本定位在屏幕的左侧和中间,并且我希望它在我调整视口大小时保持在那里。
.carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
<a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
我不确定您是要水平居中还是垂直居中。所以两个答案:
横向
您想要居中的元素 .carousel-caption
具有 px 宽度和百分比边距。
您可以只使用百分比值:
.carousel-caption {
width: 70%;
left: 15%;
}
或者让它全宽,因为所有包含的文本都居中:
.carousel-caption {
width: 100%;
left: 0px;
right:0px;
}
垂直
.carousel-caption {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
对于最小的变化;用以下内容替换您的“.carousel-caption”样式块:
.carousel-caption {
top: 0 !important;
left: 0 !important;
width: 100%;
max-width: 100vw;
padding: 0 15%;
}
然后添加 "I just want to put text left in the middle of the screen":
.carousel-caption .lead {
text-align: left;
position: absolute;
top: 45vh;
}
Fiddle: https://jsfiddle.net/c3h0zt9b/
.carousel-item .carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
right: auto;
text-align: left;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
<a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
我使用 Bootstrap 带文本的轮播滑块(轮播字幕)。它在所有设备上都有响应,但文本始终居中并位于屏幕底部。我知道如何将文本放在我想要的位置。
但是如果我改变位置,它就不能在其他设备上正确显示。我只想将文本定位在屏幕的左侧和中间,并且我希望它在我调整视口大小时保持在那里。
.carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
<a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
我不确定您是要水平居中还是垂直居中。所以两个答案:
横向
您想要居中的元素 .carousel-caption
具有 px 宽度和百分比边距。
您可以只使用百分比值:
.carousel-caption {
width: 70%;
left: 15%;
}
或者让它全宽,因为所有包含的文本都居中:
.carousel-caption {
width: 100%;
left: 0px;
right:0px;
}
垂直
.carousel-caption {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
对于最小的变化;用以下内容替换您的“.carousel-caption”样式块:
.carousel-caption {
top: 0 !important;
left: 0 !important;
width: 100%;
max-width: 100vw;
padding: 0 15%;
}
然后添加 "I just want to put text left in the middle of the screen":
.carousel-caption .lead {
text-align: left;
position: absolute;
top: 45vh;
}
Fiddle: https://jsfiddle.net/c3h0zt9b/
.carousel-item .carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
right: auto;
text-align: left;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
<a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>