Ok so here is a blueprint of what I am trying to do and some element outlines:
Alright, so as we see I want to move the logout button to the center of the div it is in (.paper).
So this is working:
button[id="centerprofile"]{
text-align: center;
margin-left: 44%;
}
However, I don't like using this margin-left: 44%; hack. Without this hack, the button just stays to the left even with text-align: center;.
How can I center this button perfectly to the .paper element it is in? Here is the rest of my code:
HTML:
<body>
<ul class="topnav">
<li><i class="fa fa-rocket" aria-hidden="true"></i> Play</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Deposit</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</li>
<li><i class="fa fa-university" aria-hidden="true"></i>Faucet</li>
<li><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</li>
<?php echo $accountButton; ?>
<li class='right' id="top-balance"></i>" . $balance . "BTC"; ?></li>
</ul>
<div class="paper">
<?php echo $contentDump; ?>
</div>
</body>
PHP $contentDump:
$contentDump =
"
<h2>Profile</h2>
<p>Account balance: " . $balance . "BTC</p>
<button id='centerprofile'>Logout</button>
";
CSS (.button, .paper, and button[id="centerprofile"]):
button[id="centerprofile"]{
text-align: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.paper{
border: 6px solid white;
height: auto;
margin: 20px;
padding: 20px;
width: auto;
background-color: white;
margin-left: 3%;
margin-right: 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: "smooth";
}
Make it a block element so you can use auto margins to center it:
button[id="centerprofile"]{
display: block;
margin-left: auto;
margin-right: auto;
}
You can use this hack:
button[id="centerprofile"]{
display: block;
margin: 4px auto;
}
The correct answer should be to center the container of the button as noted in the comment by #arbuthnott
.paper {
text-align:center;
}
Related
I apply the rules of bootstrap but my buttons seems to go out of its alignment. my "Buy Now" and "View More" buttons should be place at the right side of the each sections. But i can seems to make it with bootstrap. I do not want to use Css to align it because i wanted it to be responsive. Can anyone enlighten me to help me out with my issues?
below here are my codes
<div class="container">
<div class="row" id="myDIV">
<?php
$sql = "SELECT * FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<section id="product-display" style="z-index: 1;background: linear-gradient(180deg, <?php echo $row['product_section_colour']; ?> 25.52%, rgba(42, 86, 147, 0) 100%);">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="top:-15px; left:-20px;">
<img style="height: 160px;width: 105px;left: -2px;top: -15px;border-radius: 0px;" loading="lazy" loading="lazy" id="product_img" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
</div>
<div class="col-6 text-justify" style="position: absolute;height: 68px;left: 22%;right: 27.05%;">
<p style="color:<?php echo $row['product_dec_colour']; ?>;font-size:20px; padding-bottom:2px;font-weight: 600;"><?php echo $row['product_title']; ?></p>
<ul>
<li style="color:<?php echo $row['product_dec_colour']; ?>;font-size:7px;position: absolute;height: 68px;top: 35px;line-height: 8px;font-weight: 400;"><?php echo $row['product_desc']; ?></li>
</ul>
</div>
<div class="col-4">
Buy Now
View More
</div>
</div>
</div>
</section>
<?php
}
}
?>
</div>
this are my css
.buynow {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 17px;
}
.viewmore {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 58px;
}
section {
height: 107px;
width: 100%;
left: 0px;
top: 0px;
border-radius: 0px;
display: inline-block;
}
* {
padding: 0px;
margin: 0px;
}
ul li {
list-style-position: outside;
margin-left: 1em;
}
Why did you made "col-6" class as position:absolute? it will work if you remove that. you have used col-2,col-6,col-4 this is enough no need of position: absolute
I cannot run your code, but you can try with flex. Here is an example
<div class="d-flex">
<div class="col-4 mf-auto">
Buy Now
View More
</div>
</div>
You need to add mf-auto to your css file too.
This will help to align your content to the right side
.mf-auto {
margin-left: auto;
}
I have an angular app in which i have my nested dropdown menu. And in one of the list item i have primeng Tabview in that list item like this
<li *ngIf="user.role !== 'super'" class="nav-item flex-center-center flex-column min-width-40 no-border custom-bell-padding notifications-dropdown">
<a class="nav-link" id="notificationsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true">
<i class="fal fa-bell font-26"></i>
</a>
<div class="dropdown-menu" aria-labelledby="notificationsDropDown" (click)="onClick($event)">
<span class="dropdown-menu-arrow"></span>
<div class="ui-g header-dropdown-list">
<div class="ui-g-12 list-item-border-bottom">
<div class="ui-g-6">
<p class="font-11 pb-0">Your Notifications</p>
</div>
<div class="ui-g-6 font-11 text-right">
<app-checkbox [disabled]="disabled" label="Technician updates" [isChecked]="true"></app-checkbox>
</div>
</div>
<div class="ui-g-12">
<p-tabView class="tab-panel-underline">
<p-tabPanel header="All">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
<p-tabPanel header="Critical">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
</p-tabView>
</div>
</div>
</div>
Now i am applying custom styling in component.scss like this
.notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
.list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
p-tabview.tab-panel-underline {
.ui-tabview{
padding: 20px !important;
.ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}
But my styling is not applying on primeng tabview. I have this tabview inside of my main list item i.e li and applying some padding and width of li of primeng tabview but it's not applying my custom styles.
I have fixed this issue. The problem was causing due to ViewEncapsulation. My problem solved when i put ViewEncapsulation.None inside my component.
You can use ng-deep and & opertor in scss which refrence to parent class.
::ng-deep .notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
& .list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
& p-tabview.tab-panel-underline {
& .ui-tabview{
padding: 20px !important;
& .ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}
I don't understand why vertical-align: middle makes an icon not being centered, but a little lower.
HTML:
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
scss:
.operatorscreen {
&__single-button {
&:first-child {
margin-bottom: 10px;
}
}
&__link {
color: black;
text-decoration: none;
font-size: 18px;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background-color: red;
}
}
}
As you can see, a red background is little lower than text, though it should be right in the center vertically.
Try it:
li:not(:last-child) {
margin-bottom: 10px;
}
li::before {
content: '';
width: 16px;
height: 20px;
display: inline-block;
vertical-align: sub;
background-color: red;
}
<ul>
<li>First icon</li>
<li>Second icon</li>
</ul>
When I use a ruler to measure, it looks like vertical-align: middle is behaving correctly: it is in the middle of the lower case letters.
If you want it to be "perfect" then you may need to be more precise. There are many ideas, one quick one being:
position: relative;
top: -1px; // adjust to your desire
More on vertical-align of inline elements here: https://css-tricks.com/almanac/properties/v/vertical-align/
It's actually in the middle but you need to know what is the middle.
Aligns the middle of the element with the baseline plus half the x-height of the parent.ref
Here is an illustration to show the middle of the element aligned with the baseline plus half the x-height.
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background:
/*plus half x-height*/
linear-gradient(green,green) 0 calc(16px - 0.5ex)/100% 1px no-repeat,
/*the baseline*/
linear-gradient(#000,#000)0 16px/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
In your particular case, use top (or text-top, text-bottom, sub) instead of middle and you will be closer to the middle you expect:
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background: linear-gradient(#000,#000)center/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: top;
background:linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
I would like to evenly space the 3 links ('About', 'Hours', 'Contact') within the containing 'banLinks' div. I do not want to use a list of any kind.
I would like each link to be evenly spaced, taking up 1/3 of their container. I am very new to HTML and CSS and I'm not sure how to do this.
I think one way of doing it may be by dividing the width of the div container in pixels by 3, account for the font size, then set the margins somehow around this figure. But to me this seems a bit unseemly, I'n not sure if this is the done thing.
<body>
<div id="wrapper">
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav>
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div> </nav>
</div><!-- .wrapper-->
</body>
CSS:
#wrapper {
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
#about, #hours, #contact {
font-size: 20px;
border: 2px solid blue;
}
Here is a jsfiddle. https://jsfiddle.net/yuy84gmq/6/
you can do this using flexbox. Do as followed:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around; //or space-between whatever you like best
}
JSfiddle: https://jsfiddle.net/yuy84gmq/10/
flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this to style:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
padding: 0;
}
.banLinks a{
width: calc(33% - 4px);
display: inline-block;
margin: 0;
}
Use a display table
.banLinks {
display:table;
table-layout:fixed;
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
.banLinks a {
display:table-cell;
}
Here is the fiddle: https://jsfiddle.net/yuy84gmq/8/
A couple of options here...both of which work regardless of the number of list items...assuming there is enough width.
Display:Table-cell
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: table;
}
.banLinks a {
display: table-cell;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Flexbox
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
}
.banLinks a {
flex: 1;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Instead of usual a links, put them into a list, and set the list to be inline. Then you can apply margin to the list items to space them out.
HTML
<nav>
<ul class="banLinks">
<li><a id="about" href="#">About</a></li>
<li><a id="hours" href="#">Hours</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>
CSS
.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */
I am trying to create a button just like this one. This button already works fine in the English version, but when I switch to french, it breaks. The French text is much longer, and the button breaks into two separate parts. Any ideas how I can create a "responsive" (text size relative) button?
My code:
<div class="row-fluid">
<div class="text-box text-center"><p>View By</p></div>
<div class="btn-group pull-right small-tab" style="padding-right:20px">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-bars"></span>
</button>
<ul class="dropdown-menu pull-right">
<li </li>
<li </li>
<li </li>
</ul>
</div>
</div>
.text-box {
display: inline-block;
height: 27px;
min-width: 70px;
border: 1px solid #c2c2c2;
border-radius: 3px 0 0 3px;
font-size: 14px;
padding: 1px 0 0 0;
margin-right: -1px;
text-align: center;
margin-left: 225px;
p {
margin-top: 5px;
}
}
.small-tab {
.btn:first-child {
border-radius: 0px 3px 3px 0px;
}
}
.btn-group.open .btn.dropdown-toggle {
background-color:#1388e2;
}
.btn {
color:#ffffff;
background-color:#46a9f8;
border: none;
}
.btn:hover {
color:#ffffff;
background-color:#128ded;
}