1

Necesito poner la imagen a la derecha, pero por más que le ponga que se mueva hacia ahí, se queda donde está.

He probado con text-align: right en el css, con align="right" dentro de la etiqueta img, align-items: right en el css, y es que no hace nada.

Ya no sé qué más probar

* {
	padding:0;
	margin:0;
}

body {
	color: #FF0000;
	font: 14px Sans-Serif;
	padding: 50px;
	background: #eee;
}

h1 {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
}

p {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
	font-size: 17px;
}

.imagenICO {
	width: 150px;
	height: 150px;
	position: absolute;
	text-align: right;
}

#container {
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
	position: relative;
	background: white; 
}

table {
	background-color: #FFFFFF;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
}

th {
	background-color: #FF0000 ;
	color: #FFF;
	cursor: pointer;
	padding: 5px 10px;
}

th small {
	font-size: 9px; 
	color: black;
}

td, th {
	text-align: left;
}
<html>
<head>
</head>
<body>
<div id="container">

	<img src="https://www.stickpng.com/assets/images/580b57fbd9996e24bc43bb8f.png" class="imagenICO">

	<h1>Titulo</h1>
	<p>Hola</p>
	<p>Hola</p>

	<table class="sortable">
	    <thead>
		<tr>
			<th>Nombre Fichero</th>
			<th>Tipo</th>
			<th>Tamaño</th>
			<th>Fecha de modificación</th>
		</tr>
		
	    </thead>
  </table>
</body>

1
  • Podrías probar con float: right, pero tienes un posicionamiento absoluto que la va a fijar a 150x150. Con eso se va a mantener ahí fija independientemente del resto de código, a no ser que lo sustituyas
    – Rabegi
    Commented el 11 feb. 2020 a las 12:50

2 respuestas 2

4

Al tener la imagen posicionada en absoluto puedes usar las propiedades: top, right, bottom y left para colocar a tu elemento en la posición que desees respecto al primer ancestro con position: relative.

En tu caso la propiedad text-align no te serviría para posicionar la imagen. En su lugar puedes usar right: 0px

* {
	padding:0;
	margin:0;
}

body {
	color: #FF0000;
	font: 14px Sans-Serif;
	padding: 50px;
	background: #eee;
}

h1 {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
}

p {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
	font-size: 17px;
}

.imagenICO {
	width: 150px;
	height: 150px;
	position: absolute;
	right: 0px;
}

#container {
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
	position: relative;
	background: white; 
}

table {
	background-color: #FFFFFF;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
}

th {
	background-color: #FF0000 ;
	color: #FFF;
	cursor: pointer;
	padding: 5px 10px;
}

th small {
	font-size: 9px; 
	color: black;
}

td, th {
	text-align: left;
}
<html>
<head>
</head>
<body>
<div id="container">

	<img src="https://www.stickpng.com/assets/images/580b57fbd9996e24bc43bb8f.png" class="imagenICO">

	<h1>Titulo</h1>
	<p>Hola</p>
	<p>Hola</p>

	<table class="sortable">
	    <thead>
		<tr>
			<th>Nombre Fichero</th>
			<th>Tipo</th>
			<th>Tamaño</th>
			<th>Fecha de modificación</th>
		</tr>
		
	    </thead>
  </table>
</body>

2

estuve revisando tu código y veo que el posicionamiento que le estás dando a la imagen es absoluto, lo que quiere decir que que le estás asignando una posición exacta dentro de tu otra etiqueta div. Para hacer cambios en ese posicionamiento debes usar las propiedades top, right, bottom y left.

Para lo que tu necesitas podrías probar con esto que intenté hacer con el código css.

.imagenICO {
width: 150px;
height: 150px;
position: absolute;
top: 20px;
right: 20px;}

Puedes jugar con las propiedades que te mencioné anteriormente con este tipo de posicionamiento. Con respecto a la propiedad que usaste "text-align" no te servirá ya que es una propiedad especifica para la alineación horizontal del texto en un elemento.

Te dejo este enlace para que puedas leer un poco más acerca del posicionamiento absoluto de elementos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.