I have the following css code for drawing familly trees:
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
display: table-cell;
text-align: center;
vertical-align: top; /* added this */
list-style-type: none;
position: relative;
/*the padding is 20px + border-top = 23px*/
padding: 23px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 3px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 3px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
border-right: 3px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 3px solid #ccc;
width: 0;
height: 20px;
}
.tree li .family {
position: relative;
}
/* Person */
.person {
border: 3px solid black;
padding: 10px;
min-width: 150px;
/* min-height: 100px ;
to increase the min height of the boxes background-color: #FFFFFF; */
display: inline-block;
}
.person.female {
border-color: #F45B69;
top: 0px
}
.person.male {
top: 0px;
border-color: #456990;
}
.person .content {
position: relative;
font-size: 16px;
text-align: center;
}
Globally, this works well, but unfortunately, an offset appears in the display of the blocks.
As a simple example, the following html code
<html>
<HEAD>
<title> Family tree </title>
<link rel="stylesheet" href="styles.css">
<META http-equiv="content-type" CONTENT="text/html; charset=UTF-8" />
</HEAD>
<body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">
<b>
<div class="tree" align=center>
<ul>
<li>
<div class="person child male">
<div class="content">
some very very big familly name
</div>
</div>
<ul >
<li>
<div class="person child male">
<div class="content">Uncle</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Produce the following display:
We see that the second block is offset to the right with respect to the first block, while it should be centered just below it.
3
Answers
Try to add
style="padding: 0;"
to your second<ul>
like :
<ul style="padding: 0;">
try this:
When I look at it using the element inspector, I see an additional
padding-inline-start: 40px;
inul
. Perhaps this is the default style forul
. You can choose to remove it. To make the child centered, maybe you can usedisplay: flex
Try changing
to