Блог

Главная - Вопросы по программированию - упорядочивание моего кода html и css (изображения отображаются в середине вкладки)

упорядочивание моего кода html и css (изображения отображаются в середине вкладки)

#html #css

#HTML #css

Вопрос:

я новичок в html и css, и когда я пытался создать эту веб-страницу с ее помощью (html и css), изображения всегда появляются в середине вкладки, и я не знаю, как это организовать,

stackoverflow продолжает говорить: «Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей», мне больше нечего сказать, лол, так что заранее спасибо 🙂

это мой HTML-код:

 <html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <title>HOME</title>
</head> 
<body>
  <div class="mytabs">
    <input type="radio" id="tabfree" name="mytabs" checked="checked">
    <label for="tabfree">Free</label>
    <div class="tab">
      <h2>Free</h2>
      <p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7]

Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b
h
.</p>
    </div>

    <input type="radio" id="tabsilver" name="mytabs">
    <label for="tabsilver">Ser</label>
    <div class="tab">
      <h2>Sr</h2>
      <p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry.

Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
    </div>

    <input type="radio" id="tabgold" name="mytabs">
    <label for="tabgold">Gd</label>
    <div class="tab">
      <h2>Gd</h2>
      <p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l
</p>
    </div>
<!--
  IMAGES
-->
<div class='all-image'>
  <div class='single-pic'>
    <img src='images/brid2.jpg' >
    <div class="image-text">
      <h1>bride</h1>
      <p>hapyy bride happy life</p>
      <p>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
      </p>
    </div>
  </div>
</div>

<div class='all-image'>
  <div class='single-pic'>
    <img src='images/brid1.jpg' >
    <div class="image-text">]
      <h1>bride</h1>
      <p>hapyy bride happy life2</p>
      <p>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
      </p>
    </div>
  </div>
</div>

<div class='all-image'>
  <div class='single-pic'>
    <img src='images/image.jpg' >
    <div class="image-text">]
      <h1>bride</h1>
      <p>hapyy bride</p>
      <p>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
      </p>
    </div>
  </div>
</div>



</body>
</html>

это мой код css:

 

/*tab*/

.mytabs {
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
    margin: 50px auto;
    padding: 25px;
}
.mytabs input[type="radio"] {
    display: none;
}
.mytabs label {
    padding: 25px;
    background: white;
    font-weight: lighter;
}

.mytabs .tab {
    width: 100%;
    padding: 20px;
    background: #fff; 
    order: 1;
    display: none;
.mytabs .tab h2 {
    font-size: 2em;
}

.mytabs input[type='radio']:checked   label   .tab {
    display: block;
}

.mytabs input[type="radio"]:checked   label {
    background: #18ffff;
    border-radius: 18px; 
}
.all-image{
  text-align: center;
}
.all-image .single-pic{
  display: flex;
  padding: 24px;
  position: relative;
  width: 30%;
  height: 30%;
}

заранее благодарю вас :).

Комментарии:

1. Вы могли бы объяснить, где находятся изображения, что вы пробовали, чего не следует делать. вот почему не принимается только публикация кода, в котором говорится, что он работает не так, как ожидалось

2. Можете ли вы предоставить скриншот вашей проблемы? У вас есть стиль .all-image { text-align: center; } , в этом проблема? Вы говорите, что изображения всегда отображаются в середине вкладки; где вы ожидаете их появления?

3. @Билли Браун под вкладкой

Ответ №1:

Рассмотрите возможность удаления

   .mytabs .tab {
  width: 100%;
  padding: 20px;
  background: rgb(114, 35, 35);
  order: 1;
  display: none;
  .mytabs .tab h2 {
    font-size: 2em;
  }

Это уже выглядит намного лучше.

Ответ №2:

Для класса all-image text-align установлено значение center. Поскольку вы определили класс в div элементе, который является родительским элементом вашего img тега, ваше изображение также будет выровнено по центру.

Чтобы избежать центрирования вашего изображения, и я предполагаю, что вы хотите, чтобы ваш текст был выровнен по центру, попробуйте установить свойство CSS text-align: center в классе image-text .