Невозможно выровнять (по центру) текст внутри div на адаптивном веб-сайте при переходе с ПК на мобильный - PullRequest
Новая
       28

Невозможно выровнять (по центру) текст внутри div на адаптивном веб-сайте при переходе с ПК на мобильный

0 голосов
/ 07 октября 2019

Название говорит само за себя, это мой код в 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;
}

Кажется, все работает нормально на планшетах и ​​ПКно на экранах размером с телефон текст выводится из поля вправо, и это совершенно не верно

РЕДАКТИРОВАТЬ CSS медиазапросы: 

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

EDIT..again Итак, я добавил еще немного CSS, и это немного помогло с размером текста и приблизило его к тому, что я хотел, но все же не по центру. Я все еще работаю над этим ^^ 

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

1 Ответ

0 голосов
/ 08 октября 2019

В этом решении я взял базовый результат вашего кода, но существенно изменил стиль CSS, чтобы добиться того же самого _

Я удалил атрибуты шрифта из #outline_box и поместил их в отдельные классы, которые могутменяйте запросы @media по мере необходимости _

Я также упростил CSS, который вы использовали, чтобы позиционировать #outline_box, чтобы он больше соответствовал библиотеке 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>
...