Позиция родительского div из дочернего div

У меня есть дочерний элемент с известной позицией, но у родительской оболочки это не так. И родительская оболочка имеет еще один дочерний div, который является меткой.Позиция родительского div из дочернего div

Например:

<div id="parent"> 
    <div id="child" style="position: absolute; top: 100px; left: 50px"> 
    <img src="icon.png" /> 
    </div> 
    <span class="label">abcdefghijk</span> 
</div>

Конечно, обычно метка изменить длину и она должна находится в центре.

источник

2015-07-24 tres.14159

Так ID = "родитель" должен быть в центре или что? – Arnoldas

Да, в центре ребенка. –

Для этого не требуется position: absolute. Использование display: inline-block сделает трюк.
Ширина изображения #parent будет расти с шириной метки.

body { 
 
    margin: 1em 0 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
#parent { 
 
    display: inline-block; 
 
    border: 1px dotted blue; 
 
    padding: 10px; 
 
} 
 

 
#child { 
 
    text-align: center; 
 
    font-size: 6em; 
 
} 
 

 
.icon { 
 
    border: 1px solid red; 
 
    color:red; 
 
    display: inline-block; 
 
    padding: 12px; 
 
} 
 

 
.label { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="parent"> 
 
    <div id="child" style=""> 
 
    <i class="fa fa-heartbeat fa3 icon"></i> 
 
    </div> 
 
    <span class="label">ABCDEFGHIJKLMNOPQRSTU</span> 
 
</div>

источник

2015-07-24 18:11:50 DavidDomain

Спасибо, но мне нужно положение абсолютного ребенка, потому что оно находится в положении экрана. И я знаю положение o f ребенок, но я не знаю положения родителя и длины текста. –

Что именно вы пытаетесь достичь здесь? Извините, но я не совсем понимаю, с чем вы столкнулись. – DavidDomain

Ну, позиция изображения от PHP, метка тоже от PHP, но я не знаю количества символов этого ярлыка (и, конечно, я не знаю, как увидеть шрифт браузеров) , –

Я нашел решение, но я использовал трюк с JavaScript, и только я хотел только, чтобы сделать это с помощью CSS :(.

<html> 
    <head> 
    <title>test000</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    </head> 
    <body> 
     <div id="chincheta"> 
      <img id="image" src="tux.png"> 
      <div id="label"> 
       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
      </div> 
     </div> 
    </body> 
    <style type="text/css"> 
     #chincheta 
     { 
      position: absolute; 
      top: 100px; 
      left: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      if ($("#chincheta").width() > $("#image").width()) { 
       dif_width = $("#chincheta").width() - $("#image").width(); 

       x = $("#chincheta").offset()['left']; 

       x = x - (dif_width/2) 

       $("#chincheta") 
        .css("left", x + "px") 
        .css("text-align", "center"); 
      } 
     }); 
    </script> 
</html>

источник

2015-07-27 10:37:30

Позиция родительского div из дочернего div

ответ

Смежные вопросы