Align text horizontally to image

Asked

Viewed 392 times

6

I’m trying to align the text of some products in relation to image, but I’m not succeeding in what I’m doing, what I have is this:

    <div class="col-md-3 portfolio-item">
     <a href="detalhes.php?prod=<?php echo $row_rsProdutos['id_produto']; ?>" title=""> <img src="<?php echo $imagemThumb; ?>" alt="" /></a>
     <p align="center"><?php echo $row_rsProdutos['nome']; ?></p>
    </div>

I tried to change the reference on mine css in the options where values are found for left but the changes have no effect, the related css is this:

/*------------------------------------------*/
/*  06 - Estilos Portfolio
/*------------------------------------------*/

.portfolio-filter {
    margin-bottom: 30px;
}

.portfolio-filter li {
    display: inline-block;
    margin-right: 2px;
}

.portfolio-filter li a {
    color: #000;
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #eee;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-filter li a:hover {
    border-color: #ddd;
}

.portfolio-filter li a.selected, .portfolio-filter li a.selected:hover {
    color: #fff;
}

.portfolio-item {
    margin-bottom: 30px;
}

.portfolio-4 {
    margin-left: 5px;
}

.portfolio-4 .portfolio-item {
    width: 24.99%!important;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 22px;
}

.portfolio-item .portfolio-border {
    padding: 3px;
    border: 1px solid #eee;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-item:hover .portfolio-border {
    box-shadow: 0 1px 3px #f8f8f8;
    -o-box-shadow: 0 1px 3px #f8f8f8;
    -moz-box-shadow: 0 1px 3px #f8f8f8;
    -webkit-box-shadow: 0 1px 3px #f8f8f8;
}

.portfolio-item .portfolio-thumb {
    position: relative;
    overflow: hidden;
}

.portfolio-item .portfolio-thumb .thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-item:hover .portfolio-thumb .thumb-overlay {
    background: rgba(255,255,255,0.5);
}

.portfolio-item .portfolio-thumb .thumb-overlay i {
    color: rgba(255,255,255,0);
    position: absolute;
    top: 42%;
    left: 50%;
    display: block;
    margin-left: -27px;
    margin-top: -19px;
    font-size: 3em;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-item:hover .portfolio-thumb .thumb-overlay i {
    top: 50%;
    color: #444;
}

.portfolio-item .portfolio-details {
    position: relative;
    padding: 9px 12px 6px 12px;
}

.portfolio-item .portfolio-details .like-link {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -9px;
}

.portfolio-item .portfolio-details .like-link i, .portfolio-item .portfolio-details .like-link span {
    color: #aaa;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-item .portfolio-details .like-link:hover i, .portfolio-item .portfolio-details .like-link:hover span {
    color: #F54B5C;
}

.portfolio-item .portfolio-details h4 {
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-item .portfolio-details a span {
    color: #000;
}

.portfolio-item .portfolio-details span:after {
    content: ", ";
    margin-right: 2px;
}

.portfolio-item .portfolio-details span:last-child:after {
    content: "";
}

Picture of how I’m trying to leave inserir a descrição da imagem aqui

Page: Products

html css

  • post an image illustrating how the text should look in relation to the image.

  • already tried to give a text-align: center in the div "portfolio-item" ?

  • 1

    You are using align in the <p> tag. Always use text-align via css :)

  • Hi @Dichrist, I did it on the p tag.

  • adventist, use this in div, will centralize everything in div

  • I just made and the images got messy @Dichrist.

  • It has many stylized elements in css that do not appear in html. Post an image or link to the page so we can see. It may be that some of these elements may be getting in the way of solving the problem

Show 2 more comments

1 answer

3


It’s because the picture is smaller than the block does this:

.portfolio-item {
    text-align: center;
}

And both images and text will center, note that it is unnecessary to use align="center" in the <p> prefer to use CSS.

  • Hello @Guilherme Nascimento, thanks for the excellent tip, I had done this test earlier but I don’t know why it didn’t work, think I panicked, thank you again.

  • 1

    was what I asked to do there in the comments, the author had said that it had not worked, so I figured it could be another element disturbing.

  • @adventistapr is that you may have applied in the element <p> only or has put some element in block, block images do not align, by default <img> is inline ;)

  • 2

    @Dichrist did not see your comment, now I noticed it, I will give up for it, I think the author has even confused, why sometimes already formulate a response with a code ready helps to err less hehehehehe :) do not be afraid to answer.

  • 2

    ih that nothing bro :) The important thing is that he has reached the resolution of the problem! Up in the answer :)

  • 2

    Hello @Dichrist, that’s exactly what I did, I got confused, thanks for the tip.

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.