个人中心
gpt4 book ai didi

html - 我可以帮忙定位 2 个文本吗？

转载 作者：行者123 更新时间：2023-11-28 07:16:15 25 4
gpt4 key购买 nike

我试图将无花果标题(表示损坏的 iPhone 和图像的文本)放在图像下方的中心。并将页脚/版权放在屏幕的右侧。我已经尝试了通常的方法，但它似乎不起作用，或者我犯了一个小错误，只是我没有注意到。感谢您花时间提供帮助，祝您有美好的一天!

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lindsey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
            </ul>

        </div>
    </div>
</nav>

      <div id="carousel-example-generic" class="carousel slide" data-interval="false">
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="lindsey.jpg" style="width:370px;" alt="lindsey">
            <figcaption>Damaged iPhone and Image</figcaption>
          </div>
        </div>
        <a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="malek.html" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

   <footer class="footer">
      <div class="container" style="display: table; height: 50px; overflow: hidden;">
        <p class="text-muted" style="display: table-cell; vertical-align: middle;">&copy; 2013-2015 Paulo Pinzon-Iradian, All Right Reserved</p>
      </div>
    </footer>

</body>
</html>

CSS:

@font-face
{
    font-family:OpenSans-Regular;
    src:url(fonts/OpenSans-Regular.ttf);
}

.navbar-default{
    background: #fff;
    margin-top:2%;
    border:0px;
}

.navbar-brand
{
    font-family: Open Sans;
    font-size: 22px;
}

ul, li, a
{
    font-family: Open Sans;
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    font-weight: 100;
    letter-spacing:-1px;
}

.navbar-toggle
{
    border:0px;
}


.container .jumbotron.no-padding
{
    background: #fff;
    border:0px;
    font-family: Open Sans;
    font-size: 22px;
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
    color:#000000;
}

.footer {
    position: absolute;
    width:100%;
    bottom:0;
    left:0;
    text-align: right;
}

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
    width:50%;
    height:100%;
}

img
{
    margin:auto;
}

figcaption
{
    display:inline-block;
    text-align:left;
    margin-left:auto;
    margin-right: auto;
}

最佳答案

也许这对您有用:您的 figcaption 设置为左​​侧，因此只需将其更改为居中，您的页脚 CSS 可以是 .footer .container 以调整位置.

@font-face {
  font-family: OpenSans-Regular;
  src: url(fonts/OpenSans-Regular.ttf);
}
.navbar.navbar-default {
  background: #fff;
  margin-top: 2%;
  border: 0px;
}
.navbar.navbar-brand {
  font-family: Open Sans;
  font-size: 22px;
}
ul,
li,
a {
  font-family: Open Sans;
  font-weight: 400;
  font-size: 22px;
  color: #000000;
  font-weight: 100;
  letter-spacing: -1px;
}
.navbar-toggle {
  border: 0px;
}
.container .jumbotron.no-padding {
  background: #fff;
  border: 0px;
  font-family: Open Sans;
  font-size: 22px;
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
  color: #000000;
}
.footer .container {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-right: 20px;
  text-align: right;
}
.right.carousel-control,
.left.carousel-control {
  opacity: 0;
  filter: alpha(opacity=0);
  /* IE support */
  width: 50%;
  height: 100%;
}
img {
  margin: auto;
}
figcaption {
  display: inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/350x150/f00" style="width:370px;" alt="lindsey">
      <figcaption>Damaged iPhone and Image</figcaption>
    </div>
  </div>
  <a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="malek.html" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>
<footer class="footer">
  <div class="container" style="display: table; height: 50px; overflow: hidden;">
    <p class="text-muted" style="display: table-cell; vertical-align: middle;">&copy; 2013-2015 Paulo Pinzon-Iradian, All Right Reserved</p>
  </div>
</footer>

关于html - 我可以帮忙定位 2 个文本吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32338338/

25 4 0
文章推荐： 快速便利初始化错误
文章推荐： C++错误读取文件
文章推荐： c++ - OpenCV:CvBox2D 角度
文章推荐： 快速刷新控件 fatal error : unexpectedly found nil while unwrapping an Optional value
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com