Necesito ayuda para alinear dos elementos, uno en la parte superior central y otro en la parte superior izquierda. Tengo un div padre que contiene estos dos elementos.

                <div className = {modalStyles.header}>
                    <span className = {modalStyles.close_button}onClick={()=>setIsOpen(false)}>Cancel</span>
                    <span className = {modalStyles.title}>Add to Playlist</span>
            </div>

El código CSS es:

.header{
padding-top: 25px;
padding-bottom: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}

.close_button{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 18px;
cursor: pointer;
margin: 25px;
}

.title{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 20px;
font-weight:600;
margin: auto;
}

El problema que tengo es que el título no se alinea correctamente en el centro del encabezado. Parece estar alineado en relación con el botón de cierre.

0
user15185534 6 mar. 2021 a las 00:01

1 respuesta

La mejor respuesta

Puede usar la posición relativa para ajustarla:

.title{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 20px;
font-weight:600;
margin: auto;
position: relative;
right: 25px; // same amount as left margin of close_button
}
0
Akzhol Kadylbek 5 mar. 2021 a las 21:19