Centrar contenido con text-align:center;

SLD · #1 (**permalink**) 25/10/2015, 19:35

Hola.

necesito centrar y no me funciona.

El código es éste:

Código PHP:

  <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><title>万维网</title><link rel="icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><style type="text/css"> 
html,body{ 
border:0;margin:0; 
padding:0; 
background:#000; 
color:#fae803; 
font-family:verdana; 
font-size:0.95em; 
} 
 
#menu_general{ 
text-align:center; 
border-bottom:1px solid #e6ca00; 
margin:0; 
padding:0; 
background:inherit; 
color:#ffff1c; 
} 
 
#logo{ 
float:left; 
margin:0; 
padding:0; 
border:1px solid #aa0000; 
font-family:arial; 
font-weight:bold; 
} 
</style></head><body> 
 
<div id="logo">Esto debe flotar a la izquierda</div> 
<div id="menu_general">esto centrado</div> 
</body></html>

pueden ayudarme?

gracias.

SLD · #2 (**permalink**) 25/10/2015, 19:41

En este orden tampóco centra el contenido:

Código PHP:

  <div id="menu_general">
<div id="logo">Esto debe flotar a la izquierda</div>
esto centrado</div>

¿cómo puedo entonces centrar correctamente?

SLD · #3 (**permalink**) 25/10/2015, 20:54

No debo "LIMITAR" el ancho de la capa IZQUIERDA, pues el contenido es dinámico.

Por ello este ejemplo:

http://jsfiddle.net/CH9K8/

no me sirve, pues han limitado a 100px el ancho de las cajas de los extremos.

Puede centrarse sin indicar el ancho de la caja izquierda ?

Gracias

xfxstudios · #4 (**permalink**) 25/10/2015, 20:57

lo estas haciendo mal mano, deberias de tener un div contenedor y los otros 2 dentro de este, algio asi:

Código HTML:

Ver original<style>
.central{
    width:100%;
    position:absolute;
}
.logo{
    float:left;
    position:relative;
    z-index:2;
    width:200px;
    background-color:#D2DFF3;
}
.menu{
    text-align:center;
    position:relative;
    z-index:1;
}
</style>
<div class="central">
<div class="logo">
ESTE ES EL LOGO
</div>
<div class="menu">
ESTE ES EL MENU
</div>
</div>

de esa manera ordeno que el logo este a la izquierda y el menu al centro o donde yo quiera

SLD · #5 (**permalink**) 25/10/2015, 21:28

Cita:

Iniciado por xfxstudios

...deberias de tener un div contenedor y los otros 2 dentro de este, algio asi:

Código HTML:

Ver original<style>
.central{
    width:100%;
    position:absolute;
}
.logo{
    float:left;
    position:relative;
    z-index:2;
    width:200px;
    background-color:#D2DFF3;
}
.menu{
    text-align:center;
    position:relative;
    z-index:1;
}
</style>
<div class="central">
<div class="logo">
ESTE ES EL LOGO
</div>
<div class="menu">
ESTE ES EL MENU
</div>
</div>

de esa manera ordeno que el logo este a la izquierda y el menu al centro o donde yo quiera

Gracias por la ayuda xfxstudios.

Puedes ver que no funciona:

Código PHP:

  <style>
.central{
    width:100%;
    position:absolute;
}
.logo{
    float:left;
    position:relative;
    z-index:2;
    width:200px;
    background-color:#D2DFF3;
}
.menu{
    text-align:center;
    position:relative;
    z-index:1;
}
</style>
<div class="central">
<div class="logo">
ESTE ES EL LOGO
</div>
<div class="menu">
ESTE ES EL MENU
</div>
</div>

El contenido a centrar no queda centrado...

¿como derá hacerse?...

pzin · #6 (**permalink**) 26/10/2015, 00:12

Donde tienes que centrar el texto es en el contenedor:

Código CSS:

Ver original.contenedor {
  text-align: center;
}
 
.logo {
  float: left;
}

Código HTML:

Ver original<div class="contenedor">
  Texto centrado
  <div class="logo">Flotando a la izquierda</div>
</div>

SLD · #7 (**permalink**) 26/10/2015, 04:46

Cita:

Iniciado por pzin

Donde tienes que centrar el texto es en el contenedor:

Código CSS:

Ver original.contenedor {
  text-align: center;
}
 
.logo {
  float: left;
}

Código HTML:

Ver original<div class="contenedor">
  Texto centrado
  <div class="logo">Flotando a la izquierda</div>
</div>

Gracias Pzin.

Es correcto, debo centrar "todo" y tener el nombre de la empresa flotando a la izquierda, el cuál vá en TEXTO y además es dinámico, y por ello no puedo definir un width para el logo.

Y... como puedes ver, con tu código no sucede.

Debe exitir algún "truco" o algo nos falta para poder centrar...

Agradeceré si brindan más ideas para hacer flotar un texto sin definir su ancho.