从电脑视图转到移动设备时，无法在响应式网站上对齐（居中）div 内的文本

Question

标题说明了一切，这是我在 html:

中的代码

 <div id="outline_box">
    <p class="display-2">text</p>
    <pstyle="font-family:'Crimson Text', serif;"> more text</p>
    </div>

这是我的 css:

#outline_box{
  width: 75%;
  position: fixed;
  left: 50%;
  margin-left: -37.5%;
  padding: 100px;
  background-color: rgba(78, 97, 108, 0.55);
  border-radius: 20px;
  border: 1px solid rgba(78, 93, 102, 0.72);
  font-family: 'Mr De Haviland', cursive;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

这一切似乎在平板电脑和个人电脑上都运行良好，但在 phone-size 屏幕上，文本向右超出框，那是 完全不正确的

编辑 CSS 媒体查询：

/*---Media Queries --*/
@media (max-width: 992px) {
.social a {
    font-size: 4em;
    padding: 2rem;
  }
  }
@media (max-width: 768px) {
.carousel-caption {
    top: 45%;
  }

再次编辑.. 所以，我又添加了一些 CSS，它确实对文本的大小有所帮助，使它更接近我想要的，但仍然没有居中。我还在努力^^

#outline_box{
      font-size: 140%;
      font-weight: 500%;
      padding-bottom: .2rem;
    }

Answer 1

在这个解决方案中，我采用了您代码的基本结果，但大幅更改了 CSS 样式以实现相同的目的 _

我从 #outline_box 中删除了字体属性并将它们放入单独的类中，可以根据需要使用 @media 查询进行更改 _

我还简化了您用来定位 #outline_box 的 CSS 以更符合 Bootstrap 库 _ 您可以在下面的代码片段中看到结果 _如果将此代码放入浏览器并调整屏幕大小，您将看到样式调整为适合 _

您可以在我创建的类中调整字体大小以满足您的需要

我希望这对您有所帮助，但我建议您复习一下如何使用 Bootstrap 定位和调整页面上元素的大小 _ 祝您好运:)

CSS

#outline_box {
  background-color: rgba(78, 97, 108, 0.55);
  border-radius: 20px;
  border: 1px solid rgba(78, 93, 102, 0.72);
  color: white;
  margin: 0 auto;
  padding: 15%;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  width: 75%;
}

.largeText {
  font-family: 'Mr De Haviland', cursive;
  font-size: 6em;
}

.smallText {
    font-family:'Crimson Text', serif;
    font-size: 1em;
}

@media (max-width: 992px) {

    .social a {
        font-size: 4em;
        padding: 2rem;
    }
}

@media (max-width: 768px) {

    .largeText { font-size: 3em;}

    .carousel-caption {
        top: 45%;
    }
}

 #outline_box {
   background-color: rgba(78, 97, 108, 0.55);
   border-radius: 20px;
   border: 1px solid rgba(78, 93, 102, 0.72);
   color: white;
   margin: 0 auto;
   padding: 15%;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   width: 75%;
 }
 
 .largeText {
   font-family: 'Mr De Haviland', cursive;
   font-size: 6em;
 }
  
 .smallText {
  font-family:'Crimson Text', serif;
  font-size: 1em;
 }
 
 @media (max-width: 992px) {
  
  .social a {
   font-size: 4em;
   padding: 2rem;
  }
    }

 @media (max-width: 768px) {
  
  .largeText { font-size: 3em;}
 
  .carousel-caption {
   top: 45%;
  }
 }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  
  <body>
 
   <div id="outline_box">
    <p class="largeText">text</p>
    <p class="smallText"> more text</p>
   </div>

  </body>
</html>
  

 
 <!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
  </body>
</html>

从电脑视图转到移动设备时，无法在响应式网站上对齐（居中）div 内的文本

Can't align (in centre) text inside of div on responsive website when going from pc view to mobile

html

css

bootstrap-4

responsive-design

text-alignment