Question

我的代码中出现了以下问题：

带有id listItemProfile的img总是在中间，无论我设置什么填充，我可能因为它的父级有一些填充，但我找不到任何想法？ / p>

提前致谢！

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>

<style type="text/css">
.accordionOm {
  position: relative;
  padding: 10px 0 10px 30px;
  margin: 0;
  font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.accordionOm:hover {
  color: #000;
}
.accordionOm:before,
.accordionOm:after {
  content: "";
  position: absolute;
  background: #333;
  display: inline-block;
}
.accordionOm:before {
  width: 20px;
  height: 2px;
  left: 0;
  top: 22px;
}
.accordionOm:after {
  width: 2px;
  height: 20px;
  left: 9px;
  top: 13px;
  transition: transform .5s;
  transform: rotate(0);
}
.accordionOm.opened:after {
  transform: rotate(90deg);
}
.accordionOm + div {
  border-left: 4px solid #999;
  padding: 0 15px;
  margin-left: 8px;
  font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #666;
}

* {
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
				text-align: center;}
			body {
				width: 100%;
				margin: 0 auto;
			}
			

		#trailBar{
			margin-left: 35px;
			margin-right: 35px;
			margin-top: 25px;
			margin-bottom: 25px;
			height: 180px;
    		background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
    		border: transparent;
    		border-radius:0.25em;
		}


		p.trailTextTop{
			padding-top: 25px;
			padding-left: 25px;
			padding-right: 60px;
			padding-bottom: 25px;
			font-size: large;
		}

		p.trailTextBot{
		
			padding-left: 25px;
			padding-right: 60px;
			padding-bottom: 25px;
			font-size: large;

		}

		.left { float: left; }
		.right { float: right; }
		p { overflow: hidden; }

		.panel-group .list-group {
			margin-bottom: 0;
		}

		.panel-group .list-group .list-group-item {
			border-radius: 0;
			border-left: none;
			border-right: none;
		}

		.panel-group .list-group .list-group-item:last-child {
			border-bottom: none;
		}
			
		.panel-body{
			background: #efefef;
		}

		#listItem{
			position: relative;
			height: 200px;
			background: #efefef;
		}
		
		#listItemProfile{
			position: absolute;
			height: 80px;
			width: 80px;
			padding-top: 60px;
			padding-bottom: 60px;
			padding-left: 35px;

		}
		
		#listItemTitle{

		}
		
		#listItemSubtitle{

		}

		#listItemInfo{

		}

		#listItemArrow{

		}

</style>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">
<div id="listItem">

		<img id = "listItemProfile" src="images/Portrait.png">

		
		<div id="listItemTitle">
			
		</div>
		
		<div id="listItemSubtitle">
			
		</div>
		
		<div id="listItemInfo">
			
		</div>

		<div id="listItemArrow">
			
		</div>

</div>
</h4>
<div>

	
				<div id="trailBar">
				<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>

    			<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>

				</div>

				<div id="trailBar">
				<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>

    			<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>

				</div>

				<div id="trailBar">
				<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>

    			<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>

				</div>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
  if ($(this).hasClass("opened") == true) {
    $(this).next().slideUp("slow");
    $(this).removeClass('opened');
  } else {
    $(".opened").next().slideUp("slow");
    $(".opened").removeClass("opened");
    $(this).addClass('opened');
    $(this).next().slideDown("slow");
  }
});
</script>
</html>

＆＃13;

Answer 1

您好现在定义此css

#listItemProfile {
    position: absolute;
    height: 80px;
    width: 80px;
    /* padding-top: 60px; */
    /* padding-bottom: 60px; */
    /* padding-left: 35px; */
    left: 50%;
    top: 50%;
    margin-left: -40px; // your total width img / 2
    margin-top: -40px;  // your total height img /2
}

Answer 2

您可以使用下面给出的css：

#listItemProfile {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
}

Answer 3

尝试使用margin-left，margin-right

实施例

.class-name{
    margin-left:10px;
    margin-right:50px;
}

孩子的填充不起作用，图像始终保持中间

3 个答案: