Все сообщения слева в системе Bootstrap Grid

Я делаю галерею с помощью Bootstrap в React.js. Сообщения отображаются системой начальной загрузки. Все посты слева, но я хочу сделать их по центру. Я понятия не имею, как сделать их центральными.

После выравнивания по центру контента

После удаления поля: 10px; из .top_post

После удаления ширины: 250px; из .top_post CSS

хххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх

хххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх

CSS

.top_hello {
  text-align: right;
  margin: 20px 0 0 0;
}

.top_search {
  margin: 20px 0 20px 0;
  justify-content: right;
}

.top_search_input {
  display: flex;
  margin-right: 0;
  margin-left: auto;
}


.top_post {
  /* position: relative; */
  background:lightgreen; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 250px;
  height: 400px;
  margin: 10px;
}

.top_post_photo {
  object-fit: cover;
  width: 200px;
  height: 200px;
}

JSX

<div className = "container">
    <div className = "row text-center">
        <p className = "top_hello">Hello Hiroko!</p>
        <div className = "top_search col-12">
            <form className = "top_search_input form-inline col-4" onSubmit = {handleSubmit(getSearchResult)}>
            <input placeholder = "Search Title or Maker" className='form-control' {...register('search', { required: true })} />
            <input className='btn btn-secondary' type = "submit" value = "Search" />
            </form>
        </div>
        <>
            {post.map((item,i) => (
              <div key = {i} className = "top_post col-6 col-lg-3">
                <div className = "slideshow-container">
                  {item.photo &&
                  <div className = "mySlides fade">
                    <img className = "top_post_photo" src = {item.photo} />
                  </div>
                  }
                  {item.photo2 &&
                  <div className = "mySlides fade">
                    <img className = "top_post_photo" src = {item.photo2} />
                  </div>
                  }
                  {item.photo3 &&
                  <div className = "mySlides fade">
                    <img className = "top_post_photo" src = {item.photo3} />
                  </div>
                  }
                  {item.photo4 &&
                  <div className = "mySlides fade">
                    <img className = "top_post_photo" src = {item.photo4} />
                  </div>
                  }Ï
                  {item.photo5 &&
                  <div className = "mySlides fade">
                    <img className = "top_post_photo" src = {item.photo5} />
                  </div>
                  }
                  <a className = "prev" onclick = "plusSlides(-1)">&#10094;</a>
                  <a className = "next" onclick = "plusSlides(1)">&#10095;</a>
                </div>
                <p>Title: {item.title}</p>
                <p>Condition: {item.condition_name}</p>
        
                <Link to = {`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
              </div>
            ))}
    </div>
</div> 
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам просто нужно добавить класс justify-content-center вместе с row.

кодовый карандаш

Спасибо, но так много места, как добавленное фото...

lion-react 10.02.2023 10:20

@lion-react Попробуйте удалить margin: 10px; из .top_post правила CSS

Nirav Jethva 10.02.2023 13:24

спасибо, но нет места для каждого поста и еще немного места, как третье фото

lion-react 10.02.2023 13:41

@lion-react Попробуйте удалить width: 250px; из .top_post правила CSS.

Nirav Jethva 11.02.2023 15:25

спасибо работает, но все же мне нужно что-то. В каждом посте нет пробелов. Пожалуйста, проверьте добавленное фото

lion-react 11.02.2023 23:25

@lion-react проверьте прикрепленную ссылку codepen. Вы должны взять внутренний div внутри col и предоставить фон для этих новых элементов.

Nirav Jethva 14.02.2023 07:28

Другие вопросы по теме