centrar textarea con label

[shikamarucb]

hola a todos tengo el siguiente codigo html y no logro que el label se vea sobre la mitad del textarea, por favor si me pudieran ayudar

Código HTML:

<div class="contenido">
            <h1>Publicación</h1>
            <br><br>
            <form>
                <fieldset>
                    <div>
                        <label>Nombre del Articulo</label>
                        <input type="text" required><br><br>
                    </div>
 
                    <div>
                        <label>Descripción del Articulo</label>
                        <textarea></textarea><br><br>
                    </div>
                    
                    <div>
                        <label>Información Adicional</label>
                        <input type="text" required><br><br>
                    </div>
                    
                    <div>
                        <label>Foto</label>
                        <input type="file"><br><br>
                    </div>
                </fieldset>
            </form>
            
        </div>
 

Código CSS:

.contenido{
    background: white;
}
 
.contenido h1{
    text-align: center;
    font-family: "Lato",serif;
    font-size: 5em;
    color: black;
}
 
.contenido h2{
    float: right;
    margin: 10;
    text-align: left;
    font-family: "Lato",serif;
    font-size: 2em;
    color: black;
}
 
.contenido form div{
    text-align: left;
    font-family: "Lato",serif;
    font-size: 2em;
    color: black;
}
 
.contenido form div{
    margin: 0.4em;
}
 
.contenido form div label{
    vertical-align: -30px;
    width: 23%;
    float: left;
}
.contenido form div textarea{
    vertical-align: 75px;
}
 

[AngelKrak]

quizas lo que quieres es algo como esto no?


1.- Agrégale la Etiqueta <legend></legend> en el Titulo H1 y metelo dentro o despues de <fieldset>.
Ejemplo:

Código HTML:

<fieldset>
                  <legend><h1>Publicación</h1></legend>
</fieldset>
 

2.- Centra el Texto:

Código CSS:

legend {
  text-align: center;
}
 

Demo:
http://codepen.io/AngelKrak/pen/oXQQbv

[shikamarucb]

Hola AngelKrak

Lo que intento hacer, es que en donde dice descripcion del articulo quede centrado con el textarea y que quede simetrico mas o menos como el espacio entre label y label.

Aca creo que se ve mejor:
http://clip2net.com/s/3lrjnyu

Iniciado por AngelKrak

quizas lo que quieres es algo como esto no?


1.- Agrégale la Etiqueta <legend></legend> en el Titulo H1 y metelo dentro o despues de <fieldset>.
Ejemplo:

Código HTML:

<fieldset>
                  <legend><h1>Publicación</h1></legend>
</fieldset>
 

2.- Centra el Texto:

Código CSS:

legend {
  text-align: center;
}
 

Demo:
http://codepen.io/AngelKrak/pen/oXQQbv

[diegoguerrero]

Simplemente elimina el borde del fieldset en css.

[diegoguerrero]

Código CSS:

fieldset{
border: 0px;
}