Entrar

Como centrar un texto dentro del espacio "logotipo"

jmanuel · · Solicitar retirada
Hola de nuevo, Estoy retocando muchos aspectos de mi web y me encuentro con un problema que supongo que será sencillo pero que después de mucho probar no lo consigo.

Tengo un espacio denominado "logotipo" con una imagen y quiero poner un texto por encima y otro por debajo pero centrados.

código en página index.html

<div id="logotipo"><a href="http://www.torrevieja.com/eng/webcam.html"; target="_blank<p><b>Web-Cam</b></p><img alt="Web-Cam Torrevieja" src="objetos/webcam.gif" height="60px" width="60px"><p><b>Torrevieja</b></p></a></div>

código en página Css
#logotipo {margin:0px 0px 0px 6px; width:130px; float:left; text-align:center}

Quiero poner los textos "Web-cam" encima de la imagen y el de "Torrevieja" por debajo pero centrados. La imagen sin embargo, si la veo centrada.
Me podéis indicar la solución, Gracias
francisco1 · · Solicitar retirada
Y esto para que target="_blank solo abrirá una ventana tras otra en el navegador. Usa direcciones URL en img absolutas y no relativas img tu dominio directorio etc, vigila los detalles. En el alt elimina los - guiones, no utilices en la parte superior párrafos solo en la parte inferior.
francisco1 · · Solicitar retirada
Otra cosita no pongas párrafos porque te estas adelantando al h1, mejor crea una imagen con esos textos.
francisco1 · · Solicitar retirada
La solución seria

#p {margin:0px 0px 0px 0px; width:5px; float:left; text-align:center;}

Pero para los párrafos es mejor utilizar clases

.p

div class

Porque los párrafos hay muchos se volverían locos.
francisco1 · · Solicitar retirada
En definitiva lo que e correjido y te e comentado lo debes comprobar en tu editor o lo que estés utilizando y correjir el código si es necesario solo es una base para que lo beas mas claro.
jmanuel · · Solicitar retirada
Me acabas de fundir los plomos, jajajajajaja. Miraré todo lo que me dices pero tengo que ir poquito a poco y probando. De momento he subido a Razyhosting los dos ficheros con el CPANEL que ya se lo que es gracias a vosotros; pero el problema no se me resuelve. Te envio de nuevo el enlace: http://appartorreviejaalicante.atwebpages.com/index.html
Mi navegador es Chrome
francisco1 · · Solicitar retirada
#p {margin:0px 0px 0px 0px; width:5px; float:left; text-align:center;}

El margin 0px debes darle un margen.
jmanuel · · Solicitar retirada
Nada, he puesto mágenes a 0px y también he puesto el código height todo ello probando con varios valores pero solo consigo reducir o ampliar el espacio del logo por lo que se me deforma la página
skaparate · · Solicitar retirada
Hola!

Asumiendo una cabecera así:

<body>
  <header id="page-header">
  <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
  <figure class="page-header-content">
    <img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" alt="Oops! La imagen no est&aacute;" title="Logotipo de mi página" />
  </figure>
  <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
</header>
  <!-- Resto del contenido -->
</body>

El CSS sería algo así:

body {
  width: 100%;
}

#page-header {
  width: 80%;
  margin: 0 auto;
}

#page-header .page-header-content {
  text-align: center;
}

Aquí hay un ejemplo funcional: https://jsfiddle.net/skaparate/fw2t9dnt/2/

Puede que el resultado varíe dependiendo del resto de tu CSS, así que probablemente haya que "acomodarlo". Básicamente tienes que darle un ancho al contenedor de los párrafos y la imagen (o a cada uno de los elementos) y luego centrarlos. Para centrar un elemento de bloque (div, p, etc.) debes hacer 2 cosas:

1. Darle un ancho fijo: 300px, 50%, 30em, 50vw, etc.
2. Añadir un margen automático a la derecha y la izquierda. Puede ser de las siguientes formas:

- margin: 0 auto;
- margin: 0 auto 0 auto;
- margin-left: auto;
  margin-right: auto;