Question 349780 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to center a text in a <div> – CSS

I tried to properly center the text contained in a with no success.
The text on the is already sort of centered but everytime I add new text via it appears rigid, getting closer to the bottom margin.
I would like the text to always be equally closer to all margins, even if I add new text

is the that I would like to change. The page is created so that both main divs are boxed, one next to the other.
Tried adding manually all for margins, putting them in auto, text-allign, changing position but the text is still rigid without adapting.

this is the CSS

#contenedor {
    width: 900px;
    height: 400px;
    text-align: center;
    position: absolute;
    inset: 0;
    /* se puede usar en lugar de escribir top: 0 left: 0 right: 0 bottom: 0*/
    margin: auto;
    border-radius: 10px;
    border-block-end-style: solid;
    border-right-style: solid;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}

#calculadora {
    background: white;
    width: 50%;
    height: 100%;
    float: left;
}

#detalle {
    background: #9C6644;
    width: 50%;
    height: 100%;
    float: left;
    color: #f6f5f7;

}




.contenido {
    position: relative;
    top: 50%;`
    transform: translateY(-50%);
    overflow: hidden;
    padding: 40px;
}
<div id="contenedor">
        <div id="calculadora">
            <div class="contenido">
                <h1> Hidratación Basal</h1>
                <p class="item" id="sobrecaja">Completa todos los datos</p>
                <input class="item" id="peso" type="number" placeholder="Peso en Kg." />
                <p class="item" id="error"> * Debe completar todos los datos </p>
                <button class=" item" id="calcular"> Calcular </button>
                <p class="item resultado" id="flu"></p>
                <p class="item resultado" id="man"></p>
            </div>
        </div>

        <div id="detalle">
            <div class="contenido"></div>
            <h1> ¿Cómo se calcula?</h1>
            <ul style="list-style-type: none;" id="lista">
                <li> De 0kg a 10kg, se calcula 100 cc por cada kilo </li>
                <li> Se suman 50 cc por cada kilo de peso por arriba de los 20 kg </li>
                <li> De 20kg para arriba, se suman 20 cc por cada kilo adicional </li>
                <li> Desde pesos mayores a 30 kg, se toma en cuenta la Superficie Corporal</li>
            </ul>
        </div>
    </div>
    </div>
Tags:

2

Answers


  1. 0

    This is a perfect use-case for flexbox!

    Just use these CSS rules in your container:

    display: flex;
justify-content: center;
align-items: center;

    And then remove the position: relative and transforms.

    Example:

    #contenedor {

    width: 900px;
    height: 400px;
    text-align: center;
    inset: 0;
    /* se puede usar en lugar de escribir top: 0 left: 0 right: 0 bottom: 0*/
    margin: auto;
    border-radius: 10px;
    border-block-end-style: solid;
    border-right-style: solid;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}

#calculadora {
    background: white;
    width: 50%;
    height: 100%;
    float: left;
    
    /* Use Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
}

#detalle {
    background: #9C6644;
    width: 50%;
    height: 100%;
    float: left;
    color: #f6f5f7;

}


.contenido {
    /* No need for transforms or position: relative */
    overflow: hidden;
    padding: 40px;
}
    <!DOCTYPE html>
<html>

<head>
    <title> Calculadora de Hidratación </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <script src="script.js" defer></script>

</head>

<body>
    <div id="contenedor">
        <div id="calculadora">
            <div class="contenido">
                <h1> Hidratación Basal</h1>
                <p class="item" id="sobrecaja">Completa todos los datos</p>
                <input class="item" id="peso" type="number" placeholder="Peso en Kg." />
                <p class="item" id="error"> * Debe completar todos los datos </p>
                <button class=" item" id="calcular"> Calcular </button>
                <p class="item resultado" id="flu"></p>
                <p class="item resultado" id="man"></p>
            </div>
        </div>

        <div id="detalle">
            <div class="contenido"></div>
            <h1> ¿Cómo se calcula?</h1>
            <ul style="list-style-type: none;" id="lista">
                <li> De 0kg a 10kg, se calcula 100 cc por cada kilo </li>
                <li> Se suman 50 cc por cada kilo de peso por arriba de los 20 kg </li>
                <li> De 20kg para arriba, se suman 20 cc por cada kilo adicional </li>
                <li> Desde pesos mayores a 30 kg, se toma en cuenta la Superficie Corporal</li>
            </ul>
        </div>
    </div>
    </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Try Use it on the element

    justify-content: center;
align-items: center;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search