Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center?
I added a margin-top to adjust it, but I'm looking for a better solution. 

<div class="alert cookiealert" >
    By using our website you agree to our Cookie policy
   <div  class="acceptcookies">
      <div class="x"></div>
  </div>
</div>



.cookiealert {
    position: fixed;
    padding-left: 40px;
    font-size: 14px;
    bottom: 0;
    left: 0;
    width: 420px;
    margin-bottom: 20px;
    margin-left: 20px;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    border-radius: 50px;
    transform: translateY(80%);
    transition: all 500ms ease-out;
    color: #000;
    background-color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    position: absolute;
    display: inline-block;
    margin-left: 25px;    
}

.acceptcookies .x {
    display: block;
    position: fixed;
    width: 12px;
    height: 12px;
    transition: transform .28s ease-in-out;
    border-color: rgb(255, 255, 255);
}

.acceptcookies .x:hover {
    transform: rotate(90deg);
}

.acceptcookies .x:before {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(45deg);
    transform-origin: center;
}

.acceptcookies .x:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    transform-origin: center;
}



You can view the code here: https://codepen.io/m4573r00/pen/RwWEVWp

htmlcsscookiesbootstrap-4cookieconsent

Answer №1

Even with multiple lines of text, make sure to center it like this.

.cookiealert.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%);
  transition-delay: 1000ms;
}
.alert{
      position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}


.cookiealert {
    font-size: 14px;
    bottom: 0;
    left: 0;
    width: 420px;
    margin-left: 20px;
    z-index: 900;
    transition: all 500ms ease-out;
    color: #000;
    background-color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 12px;
  margin-top: auto;
  margin-bottom: auto;
  right: 10px;
}

.acceptcookies .x {
    display: block;
    position: relative;
    width: 12px;
    height: 13px;
    transition: transform .28s ease-in-out;
    border-color: rgb(255, 255, 255);
}

.acceptcookies .x:hover {
    transform: rotate(90deg);
}

.acceptcookies .x:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 6px; 
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(45deg);
    transform-origin: center;
}

.acceptcookies .x:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 6px;
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    transform-origin: center;
}
<div class="alert cookiealert show" >
    By using our website you agree to our Cookie policy
    By using our website you agree to our Cookie policy
    By using our website you agree to our Cookie policy
   <div  class="acceptcookies">
      <div class="x"></div>
  </div>
</div>

Answer №2

Could you please update your HTML code to utilize Flex for aligning the 'x'? Additionally, kindly remove the position: absolute property from within .cookiealert .acceptcookies

HTML

<div class="alert cookiealert d-flex" >
   <div> By agreeing to our Cookie policy, you consent to using our website </div>
   <div class="acceptcookies d-flex align-items-center">
      <div class="x"></div>
  </div>
</div>

CSS

.cookiealert .acceptcookies {
    /* position: absolute; */ /*REMOVE*/
    display: inline-block;
    margin-left: 25px;    
}



.cookiealert {
    position: fixed;
    padding-left: 40px;
    font-size: 14px;
    bottom: 0;
    left: 0;
    width: 420px;
    margin-bottom: 20px;
    margin-left: 20px;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    border-radius: 50px;
    transform: translateY(80%);
    transition: all 500ms ease-out;
    color: #000;
    background-color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    /* position: absolute; */ /*REMOVE*/
    display: inline-block;
    margin-left: 25px;    
}

.acceptcookies .x {
    display: block;
    position: fixed;
    width: 12px;
    height: 12px;
    transition: transform .28s ease-in-out;
    border-color: rgb(255, 255, 255);
}

.acceptcookies .x:hover {
    transform: rotate(90deg);
}

.acceptcookies .x:before {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(45deg);
    transform-origin: center;
}

.acceptcookies .x:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    transform-origin: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">

<div class="alert cookiealert show d-flex">
  <div> By accepting our Cookie policy, you affirm the use of our website </div>
  <div class="acceptcookies d-flex align-items-center">
    <div class="x"></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to modify text color after implementing mat-sort-header in Angular Datatable

My current setup involves using an Angular data table to display data. I recently added the mat-sort-header functionality, which allowed me to change the font color of the header text. Below is a breakdown of my code: <section id="main-content" ...

cssangularangular-material

What is the best way to keep track of dynamically inserted input fields?

I've created a form with two text boxes: one for entering people's "name" and another for their "surname." By clicking on the page, you can add additional pairs of text boxes for both "name" and "surname," allowing users to input as many pairs as ...

javascriptjqueryhtml

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

Is there a way to prevent HTML rendering with Javascript within a JSP page?

When a user accesses our site from China, we need to block certain assets to optimize the speed of the site. For example, resources from Facebook need to be blocked from loading altogether. The challenge is that this task must be accomplished using JavaSc ...

javascripthtmljsp

Abandoned <li> and </li> elements

I've come across some HTML code where orphaned <li> and </li> tags are surrounding certain paragraphs without any corresponding opening or closing <ul> or <ol> tags. Is there a way to efficiently parse or mass find/replace ove ...

htmlregexreplacehtml-listsorphan

Drawing on Canvas with Html5, shifting canvas results in significant issues

I've been working on developing an HTML5 drawing app, and while I have all the functionality sorted out, I'm facing challenges during the design phase. My main issue is centered around trying to make everything look visually appealing. Specifical ...

javascriptcsshtmlcanvas

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

csstwitter-bootstrapbootstrap-4

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

htmlcss

Can users be prevented from bookmarking a particular web page?

I'm working on a Python (Django) webpage and I need to prevent users from being able to bookmark a certain page. Is there a way to do this? ...

javascriptpythonhtml

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

javascripthtmldom

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

htmlcsssvg

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the ...

cssreactjssass

A single feature designed to handle various elements

I currently have this HTML code repeated multiple times on my webpage: <form class="new_comment"> <input accept="image/png,image/gif,image/jpeg" id="file" class="file_comment" key=comment_id type="file" name="comment[media]"> <spa ...

javascriptjqueryhtml

Sending values from multiple input fields created in PHP using AJAX can be done by following these steps

https://i.sstatic.net/GKcRc.png Within this snippet, there is a portion of a form that consists of 4 different fields/divs like the one shown. I am struggling to figure out how to send the values of these input fields to PHP using AJAX. I apologize if ...

javascriptphphtmlarraysajax

Having trouble with the PHP WHERE query - it's not functioning

Recently delving into PHP, I have a requirement to verify a user's email in the database and redirect them to the next page if it exists. However, my SQL query seems to be malfunctioning in PHP but works fine in the SQL database. The structure of my ...

phphtmlmysql

Express server does not send any response body

When a request is made to my express application, it returns an empty {}. const express = require('express'); const bcrypt = require('bcrypt'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyPar ...

htmlnode.jsexpress

Creating semantic advertisement content using HTML5 tags

With the abundance of Semantic tags in html5 for sectioning content and their importance for Search Engines, I now have a need to incorporate advertisements into my articles. My query revolves around identifying a tag that can clearly indicate when child ...

html

How to stop the overflow scrollbar in a grandchild element with CSS grid

Encountered an unusual issue while using a combination of CSS grid and overflow auto. In the scenario where there are 3 elements, the outermost element has display: grid, the middle element has height: 100%, and the innermost element has both height: 100% ...

csscss-grid