Text accompany the div

Question

Text accompany the div

Navigation

#1 by (3 votes)

2

I have a chart that returns me as follows:

I'dliketheproductnametoaccompanythechartregardlessofitssize,butit'satthetop.Seebelowthecode:

<tdstyle='text-align:center;><divid="barras">
    <span>Cobre</span><div class='barra1'  data-toggle="tooltip" data-placement="right" style="background-color: #CD5C5C; height:50%; font-size: 12px; font-family: Arial">Valor: 5,0 <br> 29%</div>
</td>

CSS:

<style media="screen">
    #barras{
      position: relative;
      width:80px;
      height:130px;
    /*  float:left;*/
      margin: 0px 10px;
    }
    .barra1, .barra2, .barra3, .barra4{
      position: absolute;
      color:#FFF;
      padding:10px;
      height:130px;
      line-height:10px;
      margin-bottom: 5px;
      bottom: 0;
    }
    </style>

css

asked by anonymous 09.10.2018 / 17:02

1 answer

How to display the attributes of an Exception in Python? Selection with Dapper using IN clause

score 3 · Accepted Answer

I made this response based on your HTML, but it is not correct to use a block element (the div in the case), within table , because they have different scopes, a display:table com children table-cell , the other is display:block .

Given this I made a suggestion within what I understood is your problem ... I have used display:flex in div who now play the role of TD and container playing the% with%. With table I can align items in column form ( flex ) and use the column and justify-content: center; properties to center horizontally and vertically.

With regard to label of the graph column you can create a pseudo-element for each column, and use align-items: center; type custom atributo in data-texto type like this: content and in the div like this: content: attr(data-texto); Then you put a <div data-texto="texto" ...> and top: 0; to place the text on the bar regardless of its size

See the example to better understand how it looks. I tried to tweak as little as possible in your HTML

.container {
	display: flex;
	justify-content: center;
	text-align: center;
	height: 130px;
	background-color: #ddd;
}
.container .barra {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 5px 0 5px;
	box-sizing: border-box;
	justify-content: flex-end;
}
.container .barra1 {
	width: 80px;
	background-color: #f00;
	margin: 0 10px;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}
.container .barra1::after {
	content: attr(data-texto);
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	text-align: center;
}

<div class="container">
	<div class="barra">
		<div data-texto="texto 123 456" class='barra1' style="height:50px" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 29%</div>
	</div>
	<div class="barra">
		<div data-texto="texto" class='barra1' style="height:75px; background-color: #ff0;" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 60%</div>
	</div>
	<div class="barra">
		<div data-texto="paralelepípedo" class='barra1' style="height:100px; background-color: #0f0;" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 90%</div>
	</div>
</div>