Tag: text-align

Texts in a ul li that are in display flex are not centered

.contact-information-container { width: 40%; margin: 0 20px; } .contact-information { display: flex; text-align: center; flex-direction: column; margin-bottom: 70px; } .contact-information li{ padding: 0 10px; float: left; text-align: center; } <div class="contact-information-container reveal"> <div class="contact-information"> <div class="information-header"> <h5>Email</h5> </div> <h6> creative@portfolio.com </h6> <h6> Tel. +86 894 680 38 </h6> </div> <div class="contact-information"> <div class="information-header"> <h5>Social Media</h5>… Read More Texts in a ul li that are in display flex are not centered

MRLeave a comment

Put text on top div that is inside another div

I want to put the text over the div that is containing an image and that div is inside another div that also has an image. .marioHeader { background-image: url(“resources/marioBackground.jpg”); background-size: 600px; height: 500px; background-position: bottom; display: flex; justify-content: center; align-items: center; background-repeat: repeat-x; background-color: #6096ff; margin-top: 50px; text-align: center; } .title { text-align: center;… Read More Put text on top div that is inside another div

MRLeave a comment

Make columns within a list in HTML/CSS

I have an unordered list in which I am displaying some objects. These objects have multiple attributes which I want to display. I made this in Python Flask and jinja. <li class="list-group-item"> <a href="link">{{candidate.name}}</a> <label id="min">Min. value:<input type="number" id="min" name="min-val" min="1" max="100"></label> <label id="max">Max. value:<input type="number" id="max" name="max-val" min="1" max="100"></label> <p id="average_rank">{{‘%0.2f’ % average_rank|float}}</p> <p… Read More Make columns within a list in HTML/CSS

MRLeave a comment

Why border-top doesn't give same border width while using display:table in div area?

I have the following HTML file: index.html @import url(‘https://fonts.googleapis.com/css?family=Open+Sans&#8217;); .div_table { display: table; border-collapse: collapse; } .div_table_row { display: table-row; } .div_table_header { font-weight: bold; text-align: center; } .div_table_cell { display: table-cell; padding-left: 10px; padding-right: 10px; font-family: “Open Sans”; font-size: 11px; border-top: 1px solid #000000; } <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport”… Read More Why border-top doesn't give same border width while using display:table in div area?

MRLeave a comment

Background image css not scaling down properly

I’m trying to put an image as a background of my project insde the body component, but when I reduce the screen width the image doesn’t overflow correctly. This is what I have now: the css is: body { background-image: url("https://phoenix-engineering.be/wp-content/uploads/2019/07/shutterstock_1113165392.png&quot;); background-size: cover; overflow: hidden; background-position: unset; background-repeat: no-repeat; text-align: center; font-family: "Roboto", sans-serif; font-family:… Read More Background image css not scaling down properly

MRLeave a comment

Operator function defaults to first if statement in JavaScript calculator project

I’m creating a calculator with JavaScript and most functions are working properly, but the operator function defaults to the first if statement each time (I switched add with subtract to test this). i.e. if the add function is in the first if statement of my operator function, every operator button will add the numbers instead… Read More Operator function defaults to first if statement in JavaScript calculator project

MRLeave a comment