Question

我正在尝试创建缩略图类型div的列表。 div具有固定的高度和宽度。 div包含图像和标题文本。图像和标题文本都必须位于容器div的垂直和水平中心。我能够使图像居中，但无法完全确定如何放置文本。我只需要使用CSS设计它。

.thumb {
  height: 100px;
  width: 96px;
  padding: 3px;
  cursor: pointer;
}

.thumb img,
.thumb svg {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

.thumb div {
  position: absolute;
}

<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
  <img src="../something.svg">
  <div>Name of something</div>
</div>

请提出我需要对CSS或HTML进行哪些更改。

Answer 1

首先是什么意思？“图像和标题文本都必须位于容器div的垂直和水平中心”？

同时，他们又是水平还是垂直？无论如何，如果您希望它们水平放置，可以使用flexbox：

.thumb {
 display : flex;
 flex-direction: row; // change this to 'column' if you want vertical
 // for center
 align-items: center;

}

希望这会对您有所帮助。

Answer 2

in_file2 = 'work1-T1.txt'
out_file2 = 'work2-T1.txt'


start_rx = re.compile('|'.join(
            ['\d\d\.\d\d\.', '\d\.\d\d\.\d\d','\d\d\.\d\d\.\d\d']))

with open(in_file2,"r") as fin2, open(out_file2, 'w') as fout3:
    for line in fin2:
        start = False
        if re.match(start_rx, line):
            start = True
        if start == False:
            print ('do something')
        if start == True:
            line = '\n' + line ## leerzeichen vor Pos Nr
            line = line.replace(start_rx, start_rx + '\n')
        fout3.write(line)

/*The ans is simple you use a wrapper*/

.thumb {
      height: 100px;
      width: 96px;
      padding: 3px;
      cursor: pointer;
    }

    .thumb img,
    .thumb svg {
      height: 100%;
      width: 100%;
      max-height: 100%;
      max-width: 100%;
    }

    .thumb div {
      position: absolute;
    }
    
    
    /*The ans is simple you use a wrapper make it flex*/
    .wrapper{ 
    display: flex;
    align-items: center;
    justify-content: center;
    }

垂直和水平中心对齐容器div内的图像和文本

2 个答案: