Как центрировать блок посередине в адаптивке?

Как прикрепить его посередине и что-бы он не двигался в адаптивке,
Помогите пожалуйста 🙂

&lt;div class="standart"&gt;     &lt;div class="container"&gt;          &lt;div class="standart-block" &gt;                 div class="in-main"&gt;                     &lt;div class="main_thing"&gt;                         &lt;h2 class="main_header"&gt;Высокие стандарты разработки&lt;/h2&gt;                              &lt;p class="main_des"&gt;Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem                                  Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.  стандартной "рыбой"                                     для текстов на латинице с начала XVI века. &lt;/p&gt;                                                                   &lt;a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"  class="company_link"                                                   &gt;Подробнее о компании&lt;/a&gt;                                             &lt;/div&gt;                                                 &lt;img src="img/Rectangle 2.png" class="photo_sandart"&gt;                                                   &lt;/div&gt;                                                 &lt;div class="line"&gt;&lt;/div&gt;                                                       &lt;/div&gt;

1

<div class="standart"> <div class="container"> <div class="standart-block" > div class="in-main"> <div class="main_thing"> <h2 class="main_header">Высокие стандарты разработки</h2> <p class="main_des">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. стандартной "рыбой" для текстов на латинице с начала XVI века. </p> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="company_link" >Подробнее о компании</a> </div> <img src="img/Rectangle 2.png" class="photo_sandart"> </div> <div class="line"></div> </div>

.standart .container{         height: 797px;         width: 100vw;         background-color: rgba(246, 246, 248, 1);         position: relative;         top: 195px;             }      .standart-block{         width: auto;         height: auto;         position: relative;         top: 100px;         left: auto;         right:auto;                                }      .in-main{     display: flex;       }      @media (max-width:1323px){         .in-main{          }     }          .main_thing{     height: 295px;     width: 489px;     position: relative;     top: 0px;     left: 0px;               }        .main_header{     font-family:'Montserrat', sans-serif ;     font-weight: 700;     font-size: 33px;     color:rgba(50, 50, 50, 1);     line-height: 52.66px;          }      .main_des {     color: rgba(153, 153, 153, 1);     line-height: 25.36px;     font-family:'Montserrat', sans-serif;     font-weight: 400;     font-size: 14px;     width: 431px;     margin: 26px 0px 20px 0px;     }          .company_link{         font-family:'Montserrat', sans-serif ;         font-weight: 500;         color: rgba(73, 133, 255, 1);         font-size: 14px;          }       .photo_sandart{     width: 440px;     height: 340px;     margin-left: 50px;          }

1

.standart .container{ height: 797px; width: 100vw; background-color: rgba(246, 246, 248, 1); position: relative; top: 195px; } .standart-block{ width: auto; height: auto; position: relative; top: 100px; left: auto; right:auto; } .in-main{ display: flex; } @media (max-width:1323px){ .in-main{ } } .main_thing{ height: 295px; width: 489px; position: relative; top: 0px; left: 0px; } .main_header{ font-family:'Montserrat', sans-serif ; font-weight: 700; font-size: 33px; color:rgba(50, 50, 50, 1); line-height: 52.66px; } .main_des { color: rgba(153, 153, 153, 1); line-height: 25.36px; font-family:'Montserrat', sans-serif; font-weight: 400; font-size: 14px; width: 431px; margin: 26px 0px 20px 0px; } .company_link{ font-family:'Montserrat', sans-serif ; font-weight: 500; color: rgba(73, 133, 255, 1); font-size: 14px; } .photo_sandart{ width: 440px; height: 340px; margin-left: 50px; }

Заранее спасибо

Дополнительно:

С наставником тебе явно не повезло. Хотя бы так сделай для начала что ли

.standart {   background: rgb(246, 246, 248);   position: relative;   top: 195px; } .standart .container {   margin: auto;   max-width: 980px;    width:95%; } .in-main{   display: flex; } .main_header{   font-family:'Montserrat', sans-serif ;   font-weight: 700;   font-size: 33px;   color:rgba(50, 50, 50, 1);   line-height: 52.66px;     } .main_des {   color: rgba(153, 153, 153, 1);   line-height: 25.36px;   font-family:'Montserrat', sans-serif;   font-weight: 400;   font-size: 14px;   width: 431px;   margin: 26px 0px 20px 0px; }     .company_link{   font-family:'Montserrat', sans-serif ;   font-weight: 500;   color: rgba(73, 133, 255, 1);   font-size: 14px;     } .photo_sandart{   width: 440px;   height: 340px;   margin-left: 50px;     }

1

.standart { background: rgb(246, 246, 248); position: relative; top: 195px; } .standart .container { margin: auto; max-width: 980px; width:95%; } .in-main{ display: flex; } .main_header{ font-family:'Montserrat', sans-serif ; font-weight: 700; font-size: 33px; color:rgba(50, 50, 50, 1); line-height: 52.66px; } .main_des { color: rgba(153, 153, 153, 1); line-height: 25.36px; font-family:'Montserrat', sans-serif; font-weight: 400; font-size: 14px; width: 431px; margin: 26px 0px 20px 0px; } .company_link{ font-family:'Montserrat', sans-serif ; font-weight: 500; color: rgba(73, 133, 255, 1); font-size: 14px; } .photo_sandart{ width: 440px; height: 340px; margin-left: 50px; }

Спасибо )

Поместите все в блок с width: 100%; и пропишите флекс. Display: flex; justify-content: center;

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
09.04.2024

Ответить

Для центрирования блока посередине на странице в адаптивном дизайне можно использовать следующий подход:

1. Использовать flexbox:
html



		
		
			
			
XHTML
			
			<div style="justify-content: center">
  <div>
    <!-- Содержимое вашего блока -->
  </div>
</div>
			
				
					
				
					1
2
3
4
5
				
						<div style="justify-content: center">
  <div>
    <!-- Содержимое вашего блока -->
  </div>
</div>

2. Использовать grid:
html



		
		
			
			
XHTML
			
			<div>
  <!-- Содержимое вашего блока -->
</div>
			
				
					
				
					1
2
3
				
						<div>
  <!-- Содержимое вашего блока -->
</div>

3. Использовать позиционирование и трансформацию:
html



		
		
			
			
XHTML
			
			<div style="position: absolute;top: 50%;left: 50%">
  <!-- Содержимое вашего блока -->
</div>
			
				
					
				
					1
2
3
				
						<div style="position: absolute;top: 50%;left: 50%">
  <!-- Содержимое вашего блока -->
</div>

4. Использовать CSS-свойство margin:
html



		
		
			
			
XHTML
			
			<div style="position: relative">
  <div style="position: absolute;top: 50%;left: 50%">
    <!-- Содержимое вашего блока -->
  </div>
</div>
			
				
					
				
					1
2
3
4
5
				
						<div style="position: relative">
  <div style="position: absolute;top: 50%;left: 50%">
    <!-- Содержимое вашего блока -->
  </div>
</div>

Выберите подход, который лучше всего соответствует вашим потребностям и стилю верстки. Помните, что важно также учитывать другие стили и элементы на странице, чтобы избежать конфликтов и сохранить адаптивность вашего дизайна.

Есть ответ
07.04.2024

Ответить

Для центрирования блока посередине на адаптивном сайте можно использовать различные подходы в зависимости от структуры вашего HTML и CSS. Вот несколько способов, которые могут помочь вам решить эту задачу:

1. Использование flexbox:
html



		
		
			
			
XHTML
			
			<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
			
				
					
				
					1
2
3
4
5
				
						<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
					
				
			
		




		
		
			
			
CSS
			
			.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* высота контейнера равна высоте экрана */
}

.content {
  max-width: 80%; /* задаем максимальную ширину контента */
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* высота контейнера равна высоте экрана */
}
 
.content {
  max-width: 80%; /* задаем максимальную ширину контента */
}

2. Использование grid:
html



		
		
			
			
XHTML
			
			<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
			
				
					
				
					1
2
3
4
5
				
						<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
					
				
			
		




		
		
			
			
CSS
			
			.container {
  display: grid;
  place-items: center;
  height: 100vh; /* высота контейнера равна высоте экрана */
}

.content {
  max-width: 80%; /* задаем максимальную ширину контента */
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						.container {
  display: grid;
  place-items: center;
  height: 100vh; /* высота контейнера равна высоте экрана */
}
 
.content {
  max-width: 80%; /* задаем максимальную ширину контента */
}

3. Использование позиционирования:
html



		
		
			
			
XHTML
			
			<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
			
				
					
				
					1
2
3
4
5
				
						<div class="container">
  <div class="content">
    Ваш контент здесь
  </div>
</div>
					
				
			
		




		
		
			
			
CSS
			
			.container {
  position: relative;
  height: 100vh; /* высота контейнера равна высоте экрана */
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* задаем максимальную ширину контента */
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						.container {
  position: relative;
  height: 100vh; /* высота контейнера равна высоте экрана */
}
 
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* задаем максимальную ширину контента */
}

Выберите подход, который лучше всего подходит для вашего проекта и примените его к вашему коду. Не забудьте адаптировать стили под ваш дизайн и требования адаптивности.

Как центрировать блок посередине в адаптивке?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как центрировать блок посередине в адаптивке?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно