基于div位置定位图像

时间:2015-08-26 05:50:26

标签: html css

我在靠近页面中心的地方有一个div。下面是div结构。

<?php
session_start();
include_once 'dbconnect.php';

if(isset($_SESSION['user'])!="")
{
 header("Location: home.php");
}
if(isset($_POST['btn-login']))
{
 $email = mysqli_real_escape_string($con, $_POST['email']);
 $upass = mysqli_real_escape_string($con, $_POST['pass']);
 $res=mysqli_query("SELECT * FROM users WHERE email='$email'");
 $row=mysqli_fetch_array($res);
 if($row['password']==md5($upass))
 {
  $_SESSION['user'] = $row['user_id'];
  header("Location: home.php");
 }
 else
 {
  ?>
        <script>alert('wrong details');</script>
        <?php
 }

}
?>

的CSS:

<div id="newsFeed">
   <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

如何从当前位置向右移动图像20px?

1 个答案:

答案 0 :(得分:2)

您可以将图像margin-left设置为20px,将图像向右移动。这将在图像左侧增加20px空间,给人的印象是图像向右移动了20px。

#thumb {
    margin-left: 20px;
}

演示

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 20px;
}
<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

或者,您也可以将left设置为20px。

#thumb {
    ....
    left: 20px;
}

演示

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}
<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

相关问题