É diferente de (1), olhe com atenção，A diferença está em .time-date
Primeiro, olhe para a renderização final
Descrição: o cabeçalho é o contêiner externo, e a imagem é o fundo.
Requisitos:
(1) Definir dados de tempo, centralizado no contêiner, ou seja, centralizado na imagem de fundo.
(2) Definir dois dados de texto e tempo em o Centro. Os dados de tempo também são centralizados.
<view class="header">
<image src="../../static/recommendSong/recommendSong.jpg"></image>
<view class="time-date">
<text class="date">{
{date}}</text>
<text class="time">{
{time}}</text>
</view>
</view>
.header{
position: relative;
height: 300rpx;
}
.header image{
height: 300rpx;
width: 100%;
}
/* 设置日期剧中显示 */
.time-date{
/* 设置在父元素居中 */
position: absolute;
height: 170rpx;
width: 400rpx;
border: red solid 1rpx;
top:50%;
left:50%;
margin-top: -85rpx;
margin-left: -200rpx;
/* 设置里面内容居中 */
display: flex;
flex-direction: column;
align-items: center;
}
.time-date text{
height: 85rpx;
line-height: 85rpx;
}
Descrição do código CSS:
1. Primeiro defina a data e hora no centro do contêiner, ative o posicionamento relativo do elemento pai, ative o posicionamento absoluto do elemento filho, defina a largura e a altura do elemento filho e defina os deslocamentos superior e esquerdo como porcentagem da largura do elemento pai. Cinqüenta é o efeito da imagem abaixo.
O deslocamento é determinado pelo canto superior esquerdo do elemento, portanto, quando a caixa é puxada para cima pela metade de sua altura, a largura geralmente é centralizada quando a caixa é puxada para a esquerda.
2. Em seguida, defina o texto para ser centralizado na data-hora. Primeiro, há duas linhas de texto. A altura deve ser dividida igualmente e, em seguida, cada uma é centralizada. Usamos o layout flexível para modificar a direção da caixa flexível para alinhar as colunas e, em seguida, usamos a propriedade align-item para definir o centro horizontal do conteúdo. Por fim, defina a altura da linha e a altura do texto separadamente, o objetivo é tornar o texto centralizado verticalmente.
Se você cometer um erro, critique e corrija-me, e agradeço seus comentários!