2
I have the following report I’m doing for learning purposes.
ul.ulHorizontal {
height: 50px;
}
ul.ulHorizontal li {
display: inline-block;
line-height: 50px;
}<ul class=ulHorizontal id=listaRegistros style="background-color:#CCC">
<li style="text-align:left; width:200px;">Leve</li><!--
--><li style="text-align:left; width:200px;">Produto 1</li><!--
--><li style="text-align:right; width:100px;">120.33</li><!--
--><li style="text-align:center; width:100px;">1</li><!--
--><li style="text-align:center; width:100px;">Correios</li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&editar&idProdutos=1"><img src="imgs/editar.png" height="30px" title="Editar Produto"/></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&bloquear&idProdutos=1" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px" title="Bloquear Produto" /></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&excluir&idProdutos=1" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px" title="Excluir Produto"/></a></li>
</ul>one ul (representing each line) is as above.
The problem is that I can’t centralize as figurines in the center vertical.
Notice that the texts are okay.
What should I do?
EDITED:
Li with the image:
Li with the texts:
Understand to difference us sizes of boxes of li’s
Editing:
function verifica(msg) {
return confirm(msg);
};/* CSS Document */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
*,
*:before,
*:after,
*:active,
*:hover {
font-family: 'Open Sans';
margin: 0;
padding: 0;
border:0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/
}
ul {
list-style: none;
}ul.topo{
background-color: #000000;
color: #FFFFFF;
}
ul.topo li {
text-align: center;
}
ul.ulHorizontal {
height: 50px;
}
ul.ulHorizontal li {
display: inline-block;
line-height: 50px;
}
ul.ulHorizontal li img {
vertical-align: middle;
}
img {
max-width: 100%;
}
a, a:hover {
text-decoration: none;
}
button,
input[type=button],
input[type=submit],
input[type=reset] {
cursor: pointer;
background-color: #CCCCCC;
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background-color: #DCDCDC;
border: 1px rgba(0,0,0,.2) solid;
}
button:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
background-color: #FFFFFF;
}
/************ CORES **************/
.bgcCinza100 {
background-color: #CCC;
}
.bgcCinza25 {
background-color: #DCDCDC;
}
.bgcPreto100 {
background-color: #000;
}
.bgcBranco100 {
background-color: #FFF;
}
.bgcVermelho100 {
background-color: #F00;
}
.bgAzulCiano {
background-color: #007EAE;
}
/************ CORES **************/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>MVC PDO CRUD</title>
<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.png"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
<ul class="ulHorizontal topo">
<li style="width:200px">CATEGORIA</li><!--
--><li style="width:200px">NOME</li><!--
--><li style="width:100px">PREÇO</li><!--
--><li style="width:100px">FRETE</li><!--
--><li style="width:100px">TRANSPORTE</li><!--
--><li style="width:100px">EDITAR</li><!--
--><li style="width:100px">BLOQUEIO</li><!--
--><li style="width:100px">EXCLUIR</li>
</ul>
<ul class=ulHorizontal id=listaRegistros style="background-color:#CCC">
<li style="text-align:left; width:200px;">Leve</li><!--
--><li style="text-align:left; width:200px;">Produto 1</li><!--
--><li style="text-align:right; width:100px;">120.33</li><!--
--><li style="text-align:center; width:100px;">1</li><!--
--><li style="text-align:center; width:100px;">Correios</li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&editar&idProdutos=1"><img src="imgs/editar.png" height="30px" title="Editar Produto"/></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&bloquear&idProdutos=1" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px" title="Bloquear Produto" /></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&excluir&idProdutos=1" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px" title="Excluir Produto"/></a></li>
</ul>
</body>
</html>
Okay. It worked. Thank you! But I have one question: How did it work if you didn’t style the <a> tag? Wouldn’t it be the case that you have to put 100% of the read on it? Otherwise, why? Why did img float on li if it is inside a <a> tag that was not stylized? Understand my doubts?
– Carlos Rocha
@Carlosrocha understand yes, and aligned pq o A is already centered on the LI due to the line-height of 50px, which is the same height as UL :D this image will help you understand http://prntscr.com/nt6ud9
– hugocsl
Yes. But you know what I realized here? I read that it is 50px, ond has the links and the images. it is reducing to the size of the images. I will add a picture at the end of the question showing.
– Carlos Rocha
@Carlosrock strange pq here the LI is the same height as the UL due to the line-height, http://prntscr.com/nt708u the image was already aligned on the "base-line" of the A, but with the vertical-align the image centered vertically on the A since the two are inline
– hugocsl
um saw the two images I posted?
– Carlos Rocha
@Carlosrocha vi mas aqui ficou assim https://imgur.com/ZJliTGO I do not know if you have any CSS more ai... however, this behavior will not influence your layout by what it seems, apparently everything has aligned even there
– hugocsl
then, I put at the end of the question a complete true of the page with all the files involved
– Carlos Rocha
@Carlosrocha tested here and apparently here is not so... https://imgur.com/OKzpsIR tb did not understand the concern since the alignment is precise and the layout seems ok. http://prntscr.com/nt74r3
– hugocsl
The concern is only with the same learning. Find out why of this so that when it occurs again later I know what it is.
– Carlos Rocha
@Carlosrocha all right, the behavior would be like I said, I just didn’t understand why here it renders of a right and then another, maybe it could be the browser version or something
– hugocsl
Bingo: tested on FF and is bandstand. It seems that only on Chrome gives this error. Did you have any hack to fix this?
– Carlos Rocha
I noticed that in Chrome and Edge there is such an offset of the margins in the inspector that this modifying the size of the li to the size of the object img
– Carlos Rocha
@Carlosrocha then that’s right, seeing as how even these things so simple can depend on the style of the browser’s user-agent... at least in this case I do not disturb the final result of the layout... You don’t have to worry about "fix" that, not in this case.
– hugocsl
beauty, understood. Again, thank you!
– Carlos Rocha