我如何将内容放置在图像的中心

问题描述 投票：0回答：2

我想将所有按钮和DB都放置在图像下方，但是在中间，如下所示：

i m m gggg我毫米毫米克我m m m g g我是米格

这是我的代码，如果您知道如何帮助您：

（我正在写这篇文章，所以我可以发帖）Lorem ipsum dolor坐镇，奉献自若，sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Nunc scelerisque viterra mauris在aliquam。 Morbi tempus iaculis urna id volutpat lacus laoreet。 Posuere sollicitudin aliquam ultrices sagittis orci透明紫杉。 Feugiat celerus varius morbi enim。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>movieDB</title>
    <link rel="stylesheet" href="ps4.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">MovieDB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Credits</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Filter
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Comedy</a>
                <a class="dropdown-item" href="#">Fantasy</a>
                <a class="dropdown-item" href="#">Kids</a>
                <a class="dropdown-item" href="#">pg</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>
    <h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
    <img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
    <button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
    <h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
    <button class="btn btn-outline-danger mr-5" type="submit">Search</button>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
html image position
2个回答
0
投票

我只是将按钮包装在DIV中，并添加了文本中心类以将按钮置于中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>movieDB</title>
    <link rel="stylesheet" href="ps4.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">MovieDB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Credits</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Filter
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Comedy</a>
                <a class="dropdown-item" href="#">Fantasy</a>
                <a class="dropdown-item" href="#">Kids</a>
                <a class="dropdown-item" href="#">pg</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>
    <h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
    <img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
    <div class="text-center">
    <button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
    <h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
    <button class="btn btn-outline-danger mr-5" type="submit">Search</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
0
投票

我想这就是您要寻找的：

您的尺寸调整似乎是m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3。因此，我只是重用了它们（我认为您不需要太多的类来使其起作用，这对效率没有好处）。

无论如何，您有答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>movieDB</title>
    <link rel="stylesheet" href="ps4.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">MovieDB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Credits</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Filter
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Comedy</a>
                <a class="dropdown-item" href="#">Fantasy</a>
                <a class="dropdown-item" href="#">Kids</a>
                <a class="dropdown-item" href="#">pg</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>
    <h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
    <img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
    <div class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3">
        <button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
        <h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
        <button class="btn btn-outline-danger mr-5" type="submit">Search</button>
    
    </div>
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.