Question

<div class="curbaT">
        <img src="avertizare/1.png" class="img" >
        <p class="p1">Curba la stanga - Este amplasat la cel mult 200 m de o curba la stanga. Conducatorul trebuie sa circule cu viteza redusa in curbe, iar daca vizibilitatea este redusa, toate manevrele (depasirea, oprirea, stationarea, mersul inapoi, intoarcerea) sunt interzise.</p>
   </div>

我有这个，我想使图像垂直居中，向左对齐，文本，垂直居中，但要在图像的右侧。

I attached an image ...而我尝试过：

.img{

   left: 50;
   height: 100px;
   width: 120px;
   margin-top: auto;
   margin-bottom: auto;
}

.p1{
    position: absolute;
    right: 120px;
    font-size: 20px;
}

Answer 1

您可以将此CSS与现有HTML结合使用来实现：

<?php
    if( YOUR_CONDITION_FUNCTION_OR_LOGIC() ){
        comment_form();
    }
?>

.curbaT { display: flex; align-items: center; } .img{ margin-left: 50; height: 100px; width: 120px; margin-top: auto; margin-bottom: auto; } .p1{ margin-right: 120px; font-size: 20px; }和display:flex在垂直方向上将内容居中。您不希望在内部元素中使用绝对定位，因为这样它们之间就会失去联系，因此请像上面那样使用边距。

Answer 2

对于更少且简单的代码，我们可以使用 flexbox 功能。但是，IE <版本11不支持 flexbox 。有关详细信息，请检查此链接-> Flexbox support.。

要回答，请使用下面的CSS通过您自己的HTML达到所需的结果。

{
  "my_index": {
    "mappings": {
      "dynamic_templates": [
        {
          "string_to_keyword": {
            "match_mapping_type": "string",
            "mapping": {
              "normalizer": "lowercase",
              "type": "keyword"
            }
          }
        }
      ],
      "properties": {
        "id": {
          "type": "long"
        },
        "name": {
          "type": "keyword",
          "normalizer": "lowercase"
        }
      }
    }
  }
}

/* Basic properties needed */
.curbaT {
  display: flex; /*This is required*/
  align-items: center; /*This is required*/
  justify-content: center;  /*this is optional*/
  flex-direction : row;/*default value - optional*/
}
/*For beautification, please check the below snippet*/

* ,*:before,*:afer {
  box-sizing: border-box;
}
.curbaT {
  display: flex; /*This is required*/
  align-items: center; /*This is required*/
  justify-content: center; 
  flex-direction : row;/*default value*/
  border: 1px solid #888; /*this can be changed*/
  height: 130px; /*this can be changed*/
  padding-left: 30px; /*this is optional*/
  padding-right: 30px; /*this is optional*/
}
.curbaT img { 
  margin-right: 20px; /*this can be changed*/
}

如何在div的中间居中放置图像和文本？

2 个答案: