Recently, I've been working on this code snippet.
I am attempting to center the profile picture even when the screen width is reduced.
The issue lies with using position:absolute, preventing margins:auto from functioning properly.
As a workaround, I applied left:40% instead.
Any suggestions on how to solve this?
In order to center horizontally and vertically using your code, the following steps need to be taken:
position:absolute + top/right/bottom/left:0 + margin:auto in img#profile-page-header .card-image {
height: 225px;
}
#profile-page-header .card-profile-image img {
width: 110px;
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<div class="row">
<div class="col s12 m8">
<div id="profile-page-header" class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg" alt="user background">
</div>
<figure class="card-profile-image">
<img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
</figure>
<div class="card-content">
<div class="row">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>For optimal positioning, use left:50%; and then apply margin-left:-55px;. The margin left value of 55 is precisely half the width of 110.
#profile-page-header .card-profile-image {
width: 110px;
position: absolute;
top: 190px;
z-index: 1;
left: 50%;
cursor: pointer;
margin-left: -55px;
}
To create a centered image within a container, you can use position: absolute on the container div. This allows the child element with class .card-profile-image to be centered using margin: auto.
#profile-page-header .card-profile-image-container {
width: 100%;
position: absolute;
top: 190px;
z-index: 1;
}
#profile-page-header .card-profile-image {
width: 110px;
cursor: pointer;
margin: auto;
}
`
<div class="card-profile-image-container">
<figure class="card-profile-image">
<img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
</figure>
</div>Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...
After dedicating 6 hours to this problem, I still can't seem to find a solution. Below is the code snippet from index.html: <flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array> <flat-strip-view availableModes=" ...
So I created a search engine with a filter using checkboxes in a form. The filter function is working fine when I submit the form (I'm using Flask for this). However, once the results are displayed, the checkboxes that were used as filters become unch ...
There is an issue with the GPA calculator app built using Node.js and Express. It works fine for a single user, but when multiple users try to use it simultaneously, the scores are being combined, resulting in incorrect values. I need to create an app that ...
I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...
Struggling to implement AG Grid in a PCF control because CSS loaders are not supported. Are there any alternatives for adding CSS without using CSS loaders? Thanks. Source - "06-22-2020 11:38 AM Ah I see - the only supported way of including CSS ...
Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...
I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. Below is the CSS code used ...
When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...
I am facing an issue with two div's, A and B. I want to hover over DIV A and display DIV B without hiding it when moving the mouse from DIV B. <div id="a"><img src="images...." class="profile" id="options" /></div> <div id="b"> ...
I need to make updates to some details in a few tables, but I'm having trouble getting it to work. Can someone help me figure out what's wrong? <body> <form class="" action="view_update_emp.php" method="post& ...
Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...
At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...
Whenever I try to expand the navigation on mobile mode by clicking the button, it doesn't push the content downwards. Instead, it just opens a small menu next to the button. Did I make a mistake in my code? <div class = "container"> ...
I am currently learning CSS and HTML, as I'm working on a project for my final school assignment. My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem ...
I am attempting to create a clickable URL that opens in a new window. The URL is being displayed and updated on my HTML page in the following manner: Python Code: def data_cb(): return jsonify(waiting=await_take_pic()) Javascript Code: jQuery(d ...
I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...
I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...
I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...
I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...